CODEWITHSUNDEEP
javascriptjqueryhtml
codingbash
codingbash

Reputation: 1172

jQuery's .children() method returns 'undefined'?

In my jQuery code, I want to be able to get the child element within a <tr> element. I have created a jQuery object and named the variable $trElement. However, for some reason calling $trElement.children(".sequence-edit") returns undefined so any further action done on that statement throws an error (since you are invoking a method on an undefined object). I have checked the HTML code of the parent element and it clearly contains a child element with the indicated class name. So why does it not work?

Here is the code I used to debug the issue.

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

The first line console.log($trElement.html()); logs:

<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>

The second line console.log($trElement.children(".sequence-edit")); logs: undefined

Upvotes: 2

Views: 2431

Answers (1)

Roko C. Buljan
Roko C. Buljan

Reputation: 206669

.children() only travels one step into your selector's (trElement) DOM tree, (and those are your <TD>'s, not your <button>).

instead, use .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>

Upvotes: 2

Related Questions