jquery：访问元素

Question

我想访问一个类=“emailSent”的div，但我无法达到div。

这里是在PHP while循环所产生的HTLML代码：

<tr><td>TR 1</td></tr><tr> 
    <td colspan="7"> 
     <div class="replyDiv" align="center" style="display:none; margin:10px 60px 10px 10px;"> 

      <form width="350px" id="userReplyForm" name="userReplyForm" method="post" action="#"> 
      <input type="hidden" id="date" name="date" value="'.time().'"/> 
      <input type="hidden" id="sender" name="sender" value="'.$username.'"/> 
      <input type="hidden" id="recipient" name="recipient" value="'.$sender.'"/> 
      <table align="center" width="350px" class="smallTxt userDetails"> 
       <tr> 
        <td align="left" width="350px"><input type="text" id="subject" name="subject" size=30 value="RE:'.$subject.'"/></td></tr> 
       <tr> 
        <td width="350px"><textarea rows="6" cols="42" id="message" name="message"></textarea></td></tr> 
       <tr> 
        <td align="center"><input type="submit" name="Submit" class="submitBtnSmallLong" value="Send Reply"/></td></tr> 
      </table> 
      </form> 

     </div> 
     <div class="emailSent" align="center" style=" margin:10px 60px 10px 10px; color:blue; font-size:18px;"> 
     </div> 
    </td> 
</tr> 

所以我有什么是对每条记录生成2行的表中。我如何才能访问该记录的相应的div （我不想更新所有div的行，只是一个正在工作）： 1）div与类“replyDiv”？ 2.）与类“emailSent”的div？

我试图用$（“。replyDiv”）直接访问div。但它不起作用。

好，这里是jQuery的部分：

$(function(){//getUserReply, send to process.php 
     $("form").submit(function(){ 
      var dataString = $(this).serialize(); 
      var message = $(this).find("#message").val(); 

     if(message==""){alert("Please enter your message"); 
      }else{ 
      $.ajax({ 
       type: "POST", 
       url: "process.php", 
       action: "submitForm", 
       data: dataString, 
       dataType: "JSON", 
       cache: false, 
       success: function(data){ 
        if(data == "true"){//hide replyDiv and show emailSent div 
         $("form").closest("tr").find(".emailSent").append("hello"); //this line appends hello to all the .emailSent divs. Remember, I have many rows so only want this particular div being shown.      
         return false; 
        } 

       } 
      }); 

     } 
      return false; 
     }); 
    }); 

Answer 1

更新：

这里是你的代码的版本，应该工作（基本上它只是将我下面写的，我也改组了一点）：

$("form").submit(function(e){ 
    e.preventDefault(); // <- better than `return false` 

    // get reference to elements: 
    var $replyDiv = $(this).parent(); 
    var $emailSent = $(this).parent().next(); 
    // or 
    // var $emailSent = $(this).closest('td').find('.emailSent'); 

    // you should give the form elements classes! 
    if(!$(this).find("#message").val()){ 
     $.ajax({ 
      type: "POST", 
      url: "process.php", // `action` does not exist as option 
      data: $(this).serialize(), 
      dataType: "JSON", 
      cache: false, 
      success: function(data){ 
       if(data == "true"){//hide replyDiv and show emailSent div 
       $replyDiv.hide(); 
       $emailSent.append('hello').show();     
       } 
      } 
     }); 
    } 
    else { 
     alert("Please enter your message"); 
    } 
}); 

---

根据您最后的评论，我想你将通过Ajax请求将表单数据发送到服务器，并且您想访问success回调中的某些特定信息。

$('.replyDiv form').submit(function(e) { 
    e.preventDefault(); 

    //    form   emailSent 
    //     v    v 
    var $emailSent = $(this).parent().next(); 
    //      ^
    //      replyDiv 

    $.ajax({ 
     //... 
     success: function() { 
      // here you want the reference 
      $emailSent.text('Worked!'); 
     } 
    }); 
}); 

---

顺便说一句。如果你真的有多个这样的行，那么你不能给表单元素ID。

Answer 2

看看你的代码，你将它定义为一个类不能作为ID

<div class="emailSent" align="center" style=" margin:10px 60px 10px 10px; color:blue; font-size:18px;"> 
    </div> 

需要改变类ID

<div id="emailSent" align="center" style=" margin:10px 60px 10px 10px; color:blue; font-size:18px;"> 
    </div>