Question

Here I have HTML tag dynamically generated by jQuery say..

<tr id="CustomerScreen" class="rows"></tr>
<tr id="TraderScreen" class="rows"></tr>
<tr id="DistributorScreen" class="rows"></tr>

I’ll set all the dynamically created table row class name to row and after that I want to loop it using class name and get id of the specific row using each. But i couldn’t get as such this is what I have tried..

$('.rows').each(function () {
            var ar = this.id;

Any solutions?

Answer 1

Your code is correct (assuming a });), provided that the elements exist when you run it. In the loop, ar will receive "CustomerScreen", then "TraderScreen", then "DistributorScreen".

Note the proviso above. So for instance, this will show those three id values in order:

<table>
<tbody>
<tr id="CustomerScreen" class="rows"></tr>
<tr id="TraderScreen" class="rows"></tr>
<tr id="DistributorScreen" class="rows"></tr>
</tbody>
</table>
<script>
$('.rows').each(function () {
    var ar = this.id;
    console.log(ar);
});
</script>

Live Example | Source

…because the script is after the elements in the document.

In contrast, this will show nothing:

<script>
$('.rows').each(function () {
    var ar = this.id;
    console.log(ar);
});
</script>
<table>
<tbody>
<tr id="CustomerScreen" class="rows"></tr>
<tr id="TraderScreen" class="rows"></tr>
<tr id="DistributorScreen" class="rows"></tr>
</tbody>
</table>

Live Example | Source

…because the script is above the elements, and they don’t exist yet when it runs.

That’s one of the reasons it’s usually best practice to put your scripts at the very end of the document, just prior to the closing </body> tag. Alternately, if you absolutely have to put the scripts above the elements, you can use the jQuery ready event:

<script>
$(function() {
    $('.rows').each(function () {
        var ar = this.id;
        console.log(ar);
    });
});
</script>
<table>
<tbody>
<tr id="CustomerScreen" class="rows"></tr>
<tr id="TraderScreen" class="rows"></tr>
<tr id="DistributorScreen" class="rows"></tr>
</tbody>
</table>

Live Example | Source

jQuery will run the function after the DOM is loaded. But this is really for use in library code; for your own page code, just put the script at the end.