1

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

4

7 回答 7

2

您遇到的问题是：

  1. children()只会看直子。您将需要使用find()which 将table tr在每篇文章中找到所有内容。
  2. 如果你算上所有的tr's，你最终会得到一个额外的，因为你的标题也将被算作一个球员。因此，您可以从tr's 的长度中减去 1。

解决方案

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

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

替代方案（我会使用的那个）

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

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

另一种选择

您也可以使用上下文选择器$('.record', this)代替$(this).find('.record')，但在我看来它更容易阅读find()链接。此外，由于上下文选择器必须在内部使用find()，find()因此直接使用会稍微好一些：性能测试

于 2013-08-06T13:45:27.373 回答
1

改变

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

至

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

演示

于 2013-08-06T13:43:56.663 回答
1

改变

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

至

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

jsFiddle 示例

.children()方法的不同之处.find()在于，.children()它只沿着 DOM 树向下移动一个级别，而.find()可以向下遍历多个级别来选择后代元素（孙子等）。

于 2013-08-06T13:45:02.763 回答
0

尝试

$(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");
    });
});

演示：小提琴

于 2013-08-06T13:46:43.127 回答
0

同上其他答案：

var numPlayers = $(this).children('table').find('tr').length;
于 2013-08-06T13:46:46.240 回答
0

该.children()函数只查看直接的后代，所以那些在 DOM 中低一级的。你说的是“寻找 a<tr>里面的 a<table>并且也是<article class="weeklyStandings">元素的直接后代”；永远不会是这样，因为<table>在这两者之间。

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

$(this).find('table tr.records').length;
于 2013-08-06T13:47:05.007 回答
0

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

于 2013-08-06T13:44:56.290 回答