jquery - 如何为每组孩子附加处理程序？

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++;
});

​</p>

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();