Метод 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>