Question

假设我有这个HTML场景：

<div class="parent">
    <a href="javascript:void(0);" class="child">Link</a>
    <a href="javascript:void(0);" class="child">Link</a>
    <a href="javascript:void(0);" class="child">Link</a>
</div>          

<div class="parent">
    <a href="javascript:void(0);" class="child">Link</a>
</div>

好吧，在child链接上，我想计算该组的大小。但是，如果我点击第一组的链接，它必须是3，而不是4。

所以我需要为每个组附加一个处理程序。试过：

$('.parent .child').size();

但计数总是4.我该怎么办？

另外，请注意，对于单个链接，没有父母：

<a href="javascript:void(0);" class="child">Link</a>

它必须也可以。（大小为1，如果它不在任何“父”组内）

这样做的最好方法是什么？

Answer 1

不是很优雅，但它应该完成工作。

$('a.child').each(function() {
    $(this).parent().children('a.child').first().addClass('first');
});
$('a.child.first').parent().each(function() {
    alert($(this).children('a.child').size());
});

http://jsfiddle.net/XFbWn/4/

注意，你会得到1-3-1而不是3-1-1 ..我假设这是因为没有父母的a.child首先被选择器抓住，因为它在DOM树比其他a.child的

编辑：上面是写的答案的解决方案。以下是作者在评论中描述的用例的更新版本

http://jsfiddle.net/XFbWn/8/

$('a.child').each(function() {
    $(this).parent().children('a.child').first().addClass('first');
});
var i = 0;
$('a.child.first').removeClass('first').each(function() {
    $(this).parent().children('a.child').addClass('colorBoxGroup-' + i);
    $('.colorBoxGroup-' + i).colorbox({ rel: 'colorBoxGroup-' + i, transition: "fade", maxWidth: "900px", maxHeight: "600px" });
    i++;
});

Answer 2

试试这个

<div class="parent" id='group1'>
   <a href="javascript:void(0);" class="child">Link</a>
   <a href="javascript:void(0);" class="child">Link</a>
   <a href="javascript:void(0);" class="child">Link</a>
</div>          

<div class="parent">
   <a href="javascript:void(0);" class="child">Link</a>
</div>
$('#group1 .child').size();

如何为每组儿童附上处理程序？

2 个答案: