jQuery的.children（）方法返回'undefined'？

Question

在我的jQuery代碼中，我希望能夠獲取<tr>元素中的子元素。我創建了一個jQuery對象並將變量命名爲$trElement。但是，由於某種原因，致電$trElement.children(".sequence-edit")返回undefined，因此對該語句執行的任何進一步操作都會引發錯誤（因爲您正在未定義的對象上調用方法）。我已經檢查過父元素的HTML代碼，並且它清楚地包含了具有指定類名稱的子元素。那爲什麼它不起作用？

這是我用來調試問題的代碼。

console.log($trElement.html()); 
console.log($trElement.children(".sequence-edit")); 

第一行console.log($trElement.html());日誌：

<td class="sequence-number">#1</td> 
<td class="sequence-data"> 
    <form action="editSequence.do" method="POST"> 
      <textarea cols="50" rows="10" name="sequence" class="sequence-data-textarea"></textarea> 
      <input type="hidden" name="index" value="0"> 
    </form> 
</td> 
<td class="button-first"> 

    <!-- Element targeting through ".sequence-class" --> 
    <button type="button" class="btn btn-info sequence-edit center-block display-true">EDIT</button> 
    <button class="btn btn-info center-block edit-submit display-false" style="display: none;">SUBMIT</button> 
</td> 
<td class="button-second"> 
    <button type="button" class="btn btn-danger delete-modal-appearance center-block display-true" data-toggle="modal" data-target="#modal-delete-confirmation">DELETE</button> 
    <button class="btn btn-warning center-block edit-cancel display-false" style="display: none;">CANCEL</button> 
</td> 
<td> 
    <input type="checkbox" class="checkbox-delete-selection center-block"> 
</td> 

第二行console.log($trElement.children(".sequence-edit"));日誌：undefined

Answer 1

.children()僅移動一步到你選擇的（trElement）DOM樹，（那些是你的<TD>的，而不是你的<button>）。

而是使用.find(".sequence-edit")

https://api.jquery.com/children/
https://api.jquery.com/find/

var $trElement = $("tr"); 
 
console.log($trElement.find(".sequence-edit").html()); // "EDIT"

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td class="sequence-number">#1</td> 
 
    <td class="sequence-data"> 
 
     <form action="editSequence.do" method="POST"> 
 
     <textarea cols="50" rows="10" name="sequence" class="sequence-data-textarea"></textarea> 
 
     <input type="hidden" name="index" value="0"> 
 
     </form> 
 
    </td> 
 
    <td class="button-first"> 
 
     <!-- Element targeting through ".sequence-class" --> 
 
     <button type="button" class="btn btn-info sequence-edit center-block display-true">EDIT</button> 
 
     <button class="btn btn-info center-block edit-submit display-false" style="display: none;">SUBMIT</button> 
 
    </td> 
 
    <td class="button-second"> 
 
     <button type="button" class="btn btn-danger delete-modal-appearance center-block display-true" data-toggle="modal" data-target="#modal-delete-confirmation">DELETE</button> 
 
     <button class="btn btn-warning center-block edit-cancel display-false" style="display: none;">CANCEL</button> 
 
    </td> 
 
    <td> 
 
     <input type="checkbox" class="checkbox-delete-selection center-block"> 
 
    </td> 
 
    </tr> 
 
</table>