在下面的示例中:
<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脚本的新手.
请告诉我.
嗯.艰难的一个.:)但是应该这样做:
$(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 + ')');
});
});
虽然上述工作,但效率不高.我还想花一点时间建议你稍微更改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 + ')');
});
| 归档时间： |
|
| 查看次数： |
4205 次 |
| 最近记录： |