jquery: use (“parent > child”) with variables

Question

For example I have a <div class="first"> containig other <div> 's and selected first one and pushed him into variable

variable = $('div.first')

And now I want something like this

$(variable + " > div")

I know, it seems stupid but what if I had an array containig table rows and I need to access columns inside a specific row:

var tableRows = $('table > tbody > tr');
var tableBodyCols = $(tableRows[i]+'> td'); // Doesn't work :(

Answer 1

Use .children()

var tableBodyCols = tableRows.children('td');

Or a context selector:

var tableBodyCols = $('> td', tableRows);

Both are equivalent but the former is easier to read imho.

Here's a fiddle demonstrating both.

---

And to iterate over all sets of children of each table row:

tableRows.each(function() {
    var tableBodyCols = $(this).children('td');
    //...
});

But if you really prefer a for loop or you need to get a specific row's columns, then eq is your friend.

for (var i = 0; i < tableRows.length; i++) {
    var tableBodyCols = tableRows.eq(i).children('td');
    //...
}

Here's the updated fiddle.