children().length 返回一个意外的值答案

【问题标题】：children().length is returning an unexpected valuechildren().length 返回一个意外的值
【发布时间】：2013-08-07 13:30:05
【问题描述】：

一切都可以在这里找到：http://jsfiddle.net/dweiliu/NBFMq/3/

这是相关代码：

$('article.weeklyStandings').each(function(){
   var numPlayers = $(this).children('table tr').length;
   $(this).children('h2').append(" - " + numPlayers + " Players");
});

我可能有多个数据表，其结果显示在 jsfiddle 中。我想通过查看表格中的行数来指出在任何给定的一周内参加比赛的玩家数量。

为什么 $(this).children('table tr').length; 在 jsfiddle 上返回 0？请注意，在我的本地机器上，同样的代码返回 3。

【问题讨论】：

.children 只获取您需要使用的直系后代.find
谢谢皮特。这是我的问题。我不知道。

标签： javascript jquery dom jquery-selectors

【解决方案1】：

你遇到的问题是：

children() 只会看直接的孩子。您需要使用find()，它将在每篇文章中找到所有table tr。
如果您计算所有tr 的值，您将得到一个额外的值，因为您的标题也将被计为一个球员。因此，您可以将 tr 的长度减 1。

解决方案

以下是实现上述解决方案的示例：Demo

var numPlayers = $(this).find('table tr').length -1;

替代品（我会使用的那个）

由于您的播放器 tr 上有一个 record 类，因此您可以在选择器中使用 .record，如果您希望将来添加不应计为的其他行，这将提供更好的可读性和灵活性某玩家：Demo

var numPlayers = $(this).find('.record').length;

另一种选择

您也可以使用$('.record', this) 之类的上下文选择器代替$(this).find('.record')，但我认为find() 链接更容易阅读。此外，由于上下文选择器内部必须使用find()，所以直接使用find() 会稍微好一些：Performance test

【讨论】：

谢谢！我用 .find 切换了 .children，它解决了我的问题。
@Dave，仅此开关无法解决您的问题，因为您的选择器是 table tr，而您的标题也是 tr。您需要从中减去一个或更改选择器以查找 .record，如我在上面的两个示例中所示。
我在我的实际站点上的 numPlayers 末尾添加了一个“- 1”。谢谢！
谢谢。在查看了所有建议之后，我想我会出于您提到的原因使用您的建议。

【解决方案2】：

改变

var numPlayers = $(this).children('table tr').length;

到

var numPlayers = $(this).find('table tr').length-1;

jsFiddle example

.children() 方法与 .find() 的不同之处在于 .children() 仅沿 DOM 树向下移动一层，而 .find() 也可以向下遍历多层以选择后代元素（孙子等）

【讨论】：

【解决方案3】：

改变

var numPlayers = $(this).children('table tr').length;

到

var numPlayers = $('.record', this).length;

DEMO

【讨论】：

谢谢。我只是使用 .find 而不是 .children，因为后者只会获得直系后代。那行得通。如果我只关注 1 个表，那么切换选择器很容易，但我需要它来扩展以使用更多表。
谢谢！我更喜欢你的解决方案，而不是我原来的解决方案，最后是 -1。

【解决方案4】：

.children() 函数只查看直接的后代，即那些在 DOM 中低一级的后代。你的意思是“在<table> 中寻找一个<tr>，它也是<article class="weeklyStandings"> 元素的直系后代”；永远不会是这样，因为<table> 在这两者之间。

您应该改用.find()，并修改您的选择器，使其不包含您的标题行：

$(this).find('table tr.records').length;

【讨论】：

谢谢。我实际上需要它来扩展到具有“记录”类的多个表。无论如何，改用 .find 而不是 .children 才是诀窍。

【解决方案5】：

其他答案同上：

var numPlayers = $(this).children('table').find('tr').length;

【讨论】：

谢谢！我用 .find 切换了 .children，它解决了我的问题。

【解决方案6】：

试试

$(document).ready(function(){
    $('tr.record').each(function(){
        var cells = $(this).children('td');
        var gamesWon = parseInt(cells[1].innerText);
        var gamesPlayed = parseInt(cells[2].innerText);
        var winningPercentage = (gamesWon / gamesPlayed * 100).toFixed(1) + "%";
        $(cells[3]).html(winningPercentage);
    });
    $('article.weeklyStandings').each(function(){
        var numPlayers = $(this).find('tr.record').length;
        $(this).children('h2').append(" - " + numPlayers + " Players");
    });
});

演示：Fiddle

【讨论】：

谢谢！我用 .find 切换了 .children，它解决了我的问题。

【解决方案7】：

在你的 numPlayer 做作中通过 find() 更改 children() :)

【讨论】：