Question

Suppose I have this html scenario :

<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>  

well, on child link I’d like to count the size of that group. But if I click on a link from the first group, it must be 3, not 4.

So I need to attach an handler for each group. Tried :

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

but the count is always 4. How can I do it?

Also, notice that for a single link, without parents :

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

it must works as well.(size is 1, also if it is not inside any “parent” group)

Best way on doing this?

Answer 1

Not very elegant, but it should get the job done.

$('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/

Note, you’ll get 1-3-1 instead of 3-1-1.. I’m assuming this is because the a.child with no parent gets grabbed by the selector first, since it’s higher in the DOM tree than the others a.child‘s

EDIT: The above is a solution to the answer as written. Below is an updated version for the use case the author describes in the comments

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

​