How to get the nth child in jquery of a new element

Question

I created a table using jquery:

var tableRow = $("<tr>").append($("<td>").text("one")) .append($("<td>").text("two")) .append($("<td>").text("three")); 

Now I add it to the table in the document:

 $("#table_id").append(tableRow); 

The next thing I want to do is set the click events on some of the tableRow cells created above. For this purpose I want to use the nth child selector. However, from the documentation, it seems that it can be used with some selectors, for example:

 $("ul li:nth-child(2)") 

But now I need to use :nth-child() for the tableRow variable. How is this possible?

Answer 1

I want to use the nth child selector for this purpose.

In this case, you can use .find()

 cell = tableRow.find(':nth-child(2)'); cell.on('click', function() { ... }); 

Answer 2

You can use . find () along with nth-child

 tableRow.find('td:nth-child(2)') 

Or in this case you can use . children () what could be better

 tableRow.children('nth-child(2)') 

Answer 3

Try with .eq() as

  $("#table_id tr td:eq(1)") 

Or you can directly call from tableRow, for example

 $(tableRow + "tr td:eq(1)") 

Answer 4

You created the element dynamically, so you need to use the following structure if it is statically created (i.e. created in HTML, you can use what you mentioned for ul)

 $('#table_id').find(":nth-child(2n)") 

Demo