Getting unexpected results when refining DOM selection

I have this very weird behavior that when I try to get the text of certain div elements, I get all previous "matches" when chaining multiple jQuery functions.

This is my code:

var rows = $("tr");
    var groups = [];
    for (var i = 0;i<rows.length;i++){
        if(rows.eq(i).html().toString().match(/TV/i)){
            groups += rows.eq(i).find(":first-child div").text();
        }
    }
    console.log(groups);

Now the output that I expect is just the text contained in the div that is contained in the first child of the matched table-row. I do get that result in the console but before that I get the text of all tr's, all matched tr's (.eq(i)), all td's (:first-child is a td), all divs and THEN at the last bit of the output I get the text that is contained in the first div.

So groups is holding all things like I would have done something like this:

groups += rows.eq(i)
groups += rows.eq(i).find(":first-child")
groups += rows.eq(i).find("div")
groups += rows.eq(i).find("div").text();

I'm fairly new to jQuery and only used standard JavaScript selectors where getElementById("myID").getElementsByTagName("div")[0].innerHTML, would give me just the innerHTML of the first div in myID and nothing else.

Why is this happening and how can I get what I'm actually looking for?

After exploring your code, I think I finaly found you probleme. IT's hard to tell since we cant see the DOM output.

Anyway, using .find(':first-child div') will get every first-child inside the tr.

Example :

td
-tr <-- Is :first-child (of td)
--div <-- is also :first-child and :first-child div (will get the text of this div)
---div <-- is also :first-child and :first-child div (will get the text of this div)
-tr
--div Is :first-child (of tr)
---div <-- is also :first-child and :first-child div (will get the text of this div)

Try using this instead :

groups.push(rows.eq(i).children(":first-child").find('div').text());

Hope it help (and actually was your problem)!

jQuery can cycle for you...

$.each($("tr"), function($index, jsObj)
{
    $jQueryObj = $(jsObj);
    /* ... */
});

alternative usage of .each:

$("tr").each(function($index, jsObj)
{
    /* etc */
});

also I believe there was a functionality like .has(":content('TV')"), but I'm not 100% sure on that at the moment.