Question

Edited: I mean grouping as giving the same REL attibute to all IMGs in the same post, but each post has different REL as the example at the end of this question.

So, I need to do the following:

<div id="Blog1" class="widget Blog">
<div class="blog-posts hfeed">
<div class="post hentry uncustomized-post-template">
<a name="8829400899632947948"/>
<div class="post-body entry-content">
<div id="8829400899632947948">
<div class="separator">

<a imageanchor="1" href="/images/outta.png">
<img src="/images/outta.png"/></a></div></div>

<div style="clear: both;"/>
</div>
<div class="post-footer">
</div></div></div></div>

I’m using jQuery and Colorbox. The first two DIVs are posts containers. I need to group the IMGs in each <div class="post hentry uncustomized-post-template"> using the REL attribute, like:

1 – Post

1.1 – IMG – REL=”group0″

1.2 – IMG – REL=”group0″

1.3 – IMG – REL=”group0″

1.4 – IMG – REL=”group0″

2 – Post

2.1 – IMG – REL=”group1″

3 – Post

3.1 – IMG – REL=”group2″

3.2 – IMG – REL=”group2″

I’ve tryied HAS, PARENT > CHILDREN and CHILDREN() from jQuery and REL: from Colorbox, but it seems I’m lacking somewhere in logic.

Could someone help me?

Answer 1

is this what you mean?

// 'walk' through every element that has class 'post'
// passing the index of each element to variable i
$('.post').each(function(i) {
    // on `this` element, find all children img
    // to which add attribute 'rel' with a value of
    // 'group' concatenated with the parent's index (i)
    $(this).find('img').attr('rel', 'group' + i);
    });

edit: add some comments, hope this help those new with jquery