CODEWITHSUNDEEP
jqueryeachchildren
David Walser
David Walser

Reputation: 302

Iterate through child item of each item in each() loop

I currently have the selected tr of a table and in this tr there are tds with labels. I want to get the value of these labels.

How is this possible?

Code

<tr>
    <td>  
        <span class="display-mode" style="display: inline;">1 </span> 
        <label id="lblid" class="edit-mode" style="display: none;">1</label> 
    </td>
    <td>  <span class="display-mode" style="display: inline;"> <label id="lblname">hans</label> </span> <input type="text" id="name" value="hans" class="edit-mode" style="display: none;"></td>
    <td>  <span class="display-mode" style="display: inline;"> <label id="lblid">1</label> </span> <input type="text" id="id" value="1" class="edit-mode" style="display: none;"></td>
    <td>  <span class="display-mode" style="display: inline;"> <label id="lblname">hans</label> </span> <input type="text" id="name" value="hans" class="edit-mode" style="display: none;"></td>
    <td class="col3Width">
        <button class="edit-user display-mode" style="display: inline-block;">Edit</button>
        <button class="save-user edit-mode" style="display: none;">Save</button>
        <button class="cancel-user edit-mode" style="display: none;">Cancel</button>
    </td>
</tr>

I tried something like this:

tr.children().each(function ()
{
    alert(this);
    $(this).children.each(function() 
    {
        alert(this);
    })

Upvotes: 0

Views: 35

Answers (2)

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

You can iterate over all td and find label inside it and use .text() to read the text inside it. see below code

$(function(){
  var tr = $("table tr:last"); // assuming that you got your tr already, i am considering last tr.
   //now find td and labels inside it
  tr.find('td').each(function(){
     console.log($(this).find('label').text());
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
    <td>  
        <span class="display-mode" style="display: inline;">1 </span> 
        <label id="lblid" class="edit-mode" style="display: none;">1</label> 
    </td>
    <td>  <span class="display-mode" style="display: inline;"> <label id="lblname">hans</label> </span> <input type="text" id="name" value="hans" class="edit-mode" style="display: none;"></td>
    <td>  <span class="display-mode" style="display: inline;"> <label id="lblid">1</label> </span> <input type="text" id="id" value="1" class="edit-mode" style="display: none;"></td>
    <td>  <span class="display-mode" style="display: inline;"> <label id="lblname">hans</label> </span> <input type="text" id="name" value="hans" class="edit-mode" style="display: none;"></td>
    <td class="col3Width">
        <button class="edit-user display-mode" style="display: inline-block;">Edit</button>
        <button class="save-user edit-mode" style="display: none;">Save</button>
        <button class="cancel-user edit-mode" style="display: none;">Cancel</button>
    </td>
</tr>
</table>

Upvotes: 1

CertainPerformance
CertainPerformance

Reputation: 370679

The problem with your

$(this).children.each

is that children is a function you can call on a jQuery collection - it's not a static property. If you wanted to iterate by way of each, you would have to call .children():

$(this).children().each

If you've already selected the tr, then you can select its descendants and filter via a selector (label, here) with .find:

const tr = $('#thetr');

tr.find('label').each(function() {
  console.log(this);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr id="thetr">
    <td>
      <span class="display-mode" style="display: inline;">1 </span>
      <label id="lblid" class="edit-mode" style="display: none;">1</label>
    </td>
    <td> <span class="display-mode" style="display: inline;"> <label id="lblname">hans</label> </span> <input type="text" id="name" value="hans" class="edit-mode" style="display: none;"></td>
    <td> <span class="display-mode" style="display: inline;"> <label id="lblid">1</label> </span> <input type="text" id="id" value="1" class="edit-mode" style="display: none;"></td>
    <td> <span class="display-mode" style="display: inline;"> <label id="lblname">hans</label> </span> <input type="text" id="name" value="hans" class="edit-mode" style="display: none;"></td>
    <td class="col3Width">
      <button class="edit-user display-mode" style="display: inline-block;">Edit</button>
      <button class="save-user edit-mode" style="display: none;">Save</button>
      <button class="cancel-user edit-mode" style="display: none;">Cancel</button>
    </td>
  </tr>
</table>

Upvotes: 1

Related Questions