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

您遇到的问题是：

children()只会看直接的孩子。您需要使用find()，它会在每篇文章中找到所有table tr。
如果算上所有tr，你最终会获得额外的奖励，因为你的标题也算作玩家。因此，您可以从tr的长度中减去1。

<强>解决方案

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

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

替代方案（我会使用的方式）

由于您的播放器上有record课程，您可以在选择器中使用.record，如果您希望将来添加其他行，这将提供更好的可读性和灵活性不算作玩家：Demo

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

另一种选择

你也可以使用像$('.record', this)这样的上下文选择器而不是$(this).find('.record')，但在我看来，更容易阅读find()链接。此外，由于上下文选择器无论如何都必须使用find()，直接使用find()会稍微好一点：Performance test

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 example

.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中向下一级。你所说的是“寻找<tr>内的<table>，同时也是<article class="weeklyStandings">元素的直接后代”;情况并非如此，因为<table>介于这两者之间。

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

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

children（）。length返回一个意外的值

7 个答案: