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

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() {
    ...
});