How to populate a table with array elements in jquery?

Question

I have a table in html, for example:

<table id="someTable"> <tr> <td> <span></span> </td> </tr> <tr> <td> <span></span> </td> </tr> <tr> <td> <span></span> </td> </tr> </table> 

I have an array someArray with three values ​​in it. I want to iterate over an array and set the range in each row for each element of the array.

I tried jquery code like this

 $('#someTable tr').each(function(i) { $(this + 'td:first span').html(someArray[i]); }); 

the problem is that it sets the last value in the array to the whole range, how to fix it?

Answer 1

Use .find() . Adding a selector to this will not work:

 $('#someTable tr').each(function(i) { $(this).find('td:first span').html(someArray[i]); }); 

Answer 2

You can use find() :

 $('#someTable tr').each(function(i) { $(this).find('td:first span').html(someArray[i]); }); 

Or context selector:

 $('#someTable tr').each(function(i) { $('td:first span', $(this)).html(someArray[i]); });