Question

I have a structure of divs inside divs, something like this:

<div class='parent'>
    <div class='a first'>something here</div>
    <div class='a'>something here</div>
    <div class='a last'>something here</div>
    <div>something here</div>
    <div>something here</div>
    <div class='a first'>something here</div>
    <div class='a'>something here</div>
    <div class='a'>something here</div>
    <div class='a'>something here</div>
    <div class='a last'>something here</div>
    <div>something here</div>
    <div>something here</div>
    <div>something here</div>
    <div class='a first last'>something here</div>
</div>
<div class='parent'>
    <div>something here</div>
    <div class='a first'>something here</div>
    <div class='a last'>something here</div>
    <div>something here</div>
    <div>something here</div>
    <div class='a first'>something here</div>
    <div class='a'>something here</div>
    <div class='a'>something here</div>
    <div class='a last'>something here</div>
</div>

As you can see, there are “consecutive blocks” of inner divs which have class a. First div in each block has class first, and last div has class last. Each block is in one parent div (block cannot span on 2 or more parent divs).

Say I click on one of the inner divs which has class a. Is that possible to select only the divs which are in the same block with the clicked div ?

How would you do this ?
(If possible, using jQuery.)

Answer 1

This will give you all siblings of the current div:

$("div.a").click(function() {
     var siblings = $(this).siblings("div");
})

If you just want the ones from each .first to .last block then you want something like:

$("div.a").click(function() {
    var clicked = $(this);
    var siblings = clicked.prevUntil(":not(div.a)")
                          .andSelf()
                          .add(clicked.nextUntil(":not(div.a)"));
})

(This assumes they will always be consecutive. It gets a lot more complicated if they’re not. It will also not work correctly if there are two consecutive groups without separation. It should be fairly easy to modify it to work in these situations.)

Edit: This should work in all situations

$("div.a").click(function() {
    var clicked = $(this);
    var siblings = clicked.prevUntil(":not(.a:not(.last))")
                          .andSelf()
                          .add(clicked.nextUntil(":not(.a:not(.first))"));
    $("#output").html(siblings.length);
});​

http://jsfiddle.net/ZL6rw/2/