Clash Royale CLAN TAG

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

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

tr

tr

tds

labels

How is this possible?

<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);
})


2 Answers
2

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

label

.text()

$(function(){
$("table tr 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>

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. But why not just use the appropriate CSS selector for the labels you want instead?

children

$('table label').each(function() {
console.log(this);
});

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

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.