Question

在下面的例子中：

<html>
<head>
<script src="some.js" type="text/javascript"></script>
<script type="text/javascript">

//???
//???

);

</script>
</head>
<body>
<table>
<tr id="parent_1">
<td>Parent 1</td>
</tr>
<tr class="child">
<td>Child 1</td>
</tr>
<tr class="child">
<td>Child 2</td>
</tr>
<tr id="parent_2">
<td>Parent2</td>
</tr>
</table>
</body>
</html>

我希望“Parent 1”文本更改为“Parent 1（2）”，其中“2”是使用Java脚本或Jquery的给定父级的子级数。这怎么可能？

我是JQuery和Java脚本的新手。

请告诉我。

Answer 1

嗯。艰难的一个。 :)但是应该这样做：

$(function() {
    $("tr[id^='parent_']").each(function() {
        var count = 0;
        $(this).nextAll('tr').each(function() {
            if($(this).hasClass('child')) {
                count++;
            } else {
                return false;
            }
        });
        $(this).find('td').append(' (' + count + ')');
    });
});

Tested and works

虽然上述方法有效，但效率不高。我还想花一点时间建议你稍微更改HTML的格式。您希望使代码尽可能与其拥有的内容保持语义相关。有一个巨大的桌子混合父母和孩子不是实现这一目标的最佳方式。我不确定你的用例是什么，但考虑做这样的事情：

<ul>
  <li id="parent_1">
    <span>Parent 1</span>
    <ul>
      <li>Children 1</li> 
      <li>Children 2</li>
      <li>Children 3</li>
    </ul>
  </li>
  <li id="parent_2">
    <span>Parent 2</span>
    <ul>
      <li>Children 1</li> 
    </ul>
  </li>
  <li id="parent_3">
    <span>Parent 3</span>
    <ul>
      <li>Children 1</li> 
      <li>Children 2</li>
    </ul>
  </li>
</ul>

你仍然可以设置这个样式但你想要给它你想要的外观，虽然如果你真的显示关于父母和孩子的表格数据可能不那么容易。

然而，使用该代码，您可以更有效地简化上述内容：

$('ul > li').each(function() {
    var count = $(this).find('li').length;
    $('span', this).append(' (' + count + ')');
});

如果无法/期望将代码从表格更改为列表，但您可以访问可能生成此表格的服务器端代码，那么您至少可以通过为所有孩子提供课程来简化操作使用父级的ID，并为所有父母提供一个共同的类：

<table>
    <tr id="parent_1" class="parent">
        <td>Parent 1</td>
    </tr>
    <tr class="child parent-1">
        <td>Child 1</td>
    </tr>
    <tr class="child parent-1">
        <td>Child 2</td>
    </tr>
    <tr id="parent_2" class="parent">
        <td>Parent2</td>
    </tr>
    <tr class="child parent-2">
        <td>Child 1</td>
    </tr>
    <tr id="parent_3" class="parent">
        <td>Parent3</td>
    </tr>
    <tr class="child parent-3">
        <td>Child 1</td>
    </tr>
    <tr class="child parent-3">
        <td>Child 2</td>
    </tr>
    <tr class="child parent-3">
        <td>Child 3</td>
    </tr>
</table>

这将允许您这样做，比原始解决方案快得多：

$('tr.parent').each(function() {
    var id = $(this).attr('id').split('_').pop();
    var count = $('tr.parent-' + id).length;
    $(this).find('td').append(' (' + count + ')');
});

Answer 2

给父母一类“父母”，使其更容易。

$('tr.parent').each(function() {
  var next = $(this).next();
  var count = 1;
  while (next = $(next).next() && $(next).hasClass('child')) {
    count++;
  }
  $(this).find('td').append(' (' + count + ')');
});

Answer 3

因为你的html实际上没有将子节点放在标记中的父节点下面，所以最简单的方法是遍历所有TR并为每个父节点计算class =“child”。保罗的代码应该为你做到这一点。

最好将子节点定义为父节点的实际子节点，然后jquery可以为您简化一些事情。如果你有能力像这样重构你的桌子：

<table>
<tr id="parent_1">
<td>Parent 1
<table>
<tr class="child">
<td>Child 1</td>
</tr>
<tr class="child">
<td>Child 2</td>
</tr>
</table>
</td>
</tr>
<tr id="parent_2">
<td>Parent2</td>
</tr>
</table>

然后你可以编写简单的jquery，如：

$("td").each(function(){$(this).val($(this).val() + "(" + $(this).find("td").length + ")"); });

Answer 4

我发现复杂的jQuery选择器和循环很有趣，因为DOM已经有一个非常好的'rowIndex'属性，你可以用来简单而有效地获取子数：

var p1= document.getElementById('parent_1');
var p2= document.getElementById('parent_2');

var childn= p2.rowIndex-p1.rowIndex-1;
p1.cells[0].firstChild.data+= ' ('+childn+')';

如何使用Javascript或JQuery在父级中显示子记录的计数

4 个答案: