How to get nth child in jquery of a new element

Question

I have created table row 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 to set the click events on some of the cells of the tableRow created above. I want to use nth child selector for that purpose. However from the documentation it seems that it is possible to use it with some selectors like :

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

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

Answer 1

Your created the element dynamically so you have to use the following structure, if its statically created(ie: created in HTML you can use what your mention for ul)

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

DEMO

Answer 2

I want to use nth child selector for that purpose.

In that case, you can use .find()

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

Answer 3

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

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

Or in this case you can use .children(), which might be better

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

Answer 4

Try with .eq() like

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

Or you can directly call from tableRow like

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