优化 DOM 选择时得到意想不到的结果

Question

我有一个非常奇怪的行为，当我尝试获取某些 div 元素的文本时，我在链接多个 jQuery 函数时得到了所有以前的“匹配项”。

这是我的代码：

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);

现在我期望的输出只是匹配表行的第一个子项中包含的 div 中包含的文本。 我确实在控制台中得到了这个结果，但在此之前我得到了所有tr的文本，所有匹配的tr（.eq(i)），所有td（:first-child是td），所有divs 然后在输出的最后一位我得到包含在第一个 div 中的文本。

所以groups 持有所有东西，就像我会做这样的事情：

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

我对 jQuery 还很陌生，只使用了标准的 JavaScript 选择器，其中 getElementById("myID").getElementsByTagName("div")[0].innerHTML 只会给我 myID 中第一个 div 的 innerHTML，没有别的。

为什么会发生这种情况，我怎样才能得到我真正想要的东西？

Answer 1

在浏览了您的代码之后，我想我终于找到了您的问题。这很难说，因为我们看不到 DOM 输出。

无论如何，使用.find(':first-child div') 将获得 tr 中的每个第一个孩子。

例子：

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)

尝试改用这个：

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

希望它有所帮助（实际上是您的问题）！

Answer 2

jQuery 可以为你循环...

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

.each 的替代用法：

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

我也相信有像.has(":content('TV')") 这样的功能，但我目前还不能 100% 确定。