Is that possible to do this using jQuery ?

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/

Answer 2

function allDivs(sender)
{
   var allAs = $(sender).parent().children();

   //Do other things
}

Bind every Div's onclick event having "a" as class to this function passing "this" as parameter

Answer 3

Something like this should work

$('div.a').click(function()
{
    $(this).siblings();
});

You can also do something similar like this :

$('div a').click(function()
{
    $(this).siblings('div.a');
});

That will select only the divs with a class of "a" etc.

EDIT : Ok. I see what you want to do.

$(div.a).click(function()
{
    var CurrentNode = $(this).prev('div.first');
    while(true)
    {

        //Do whatever to the node here. Bind events etc

        //Check if the current node is the last. 
        if(CurrentNode.hasClass('last'))
            break;

        //Get the next node. 
        var CurrentNode = CurrentNode.next('div');
    }
});

That should do it. Ofcourse you need to be doing something to the nodes as you iterate through them. Not the most elegant of solutions (Probably something better out there), but it should work.

In future though, just try and articulate your question better instead of downvoting everyone.

Answer 4

Other answerers don't realize that you are asking about getting all siblings between a "first" and "last" element, not just all siblings. To facilitate this, you should wrap each block in a div like so:

<div class="block">
  <div class="first">
    <div class="a">something</div>
  </div>
  <div class="block">
    <div class="a">something</div>
    <div class="a">something</div>
  </div>
  <div class="last">
    <div class="a">something</div>
  </div>
</div>

Now if one of the .block .a elements is clicked, you can get all of its siblings by simply doing

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

siblings will be all the div.a elements which are contained by the same parent.

Answer 5

'last + *' is to include the closing element. This will select the first and last div for the same 'block'.

if($(this).hasClass('first')){
  $(this).nextUntil('.last + *').andSelf().css('background-color','red');
}
else{
  $(this).prevUntil(':not(div.a)').css('background-color','red');
  $(this).nextUntil('.last + *').andSelf().css('background-color','red');
}