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>