children().length返回了一个意外值

Question

一切都可以在这里找到：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。

Answer 1

您遇到的问题是：

1. children()将只查看直接子级。您将希望使用find()，它将在每篇文章中找到所有的table tr
2. 如果你计算所有的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()的性能会稍好一些：性能测试

Answer 2

更改

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

至

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

DEMO

Answer 3

更改

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

至

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

jsFiddle示例

.children()方法与.find()的不同之处在于，.children()只在DOM树中向下移动一个级别，而.find()可以向下移动多个级别来选择子元素（孙元素等）以及

Answer 4

在您的numPlayer设置中通过find（）更改children（）：）

Answer 5

尝试

$(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

Answer 6

其他答案同上：

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

Answer 7

.children()函数只关注直系后代，所以那些在DOM中位于下一级的后代。您所说的是"查找<table>内部的<tr>，它也是<article class="weeklyStandings">元素的直接后代"；但情况永远不会是这样，因为CCD_ 22介于两者之间。

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

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