Is that possible to do this using jQuery?
I have a structure of div
s inside div
s, 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 div
s 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
div
s).
Say I click on one of the inner div
s which has class a
. Is that possible to select only the div
s which are in the same block with the clicked div
?
How would you do this ? (If possible, using jQuery.)
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/
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.
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
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.
'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');
}
精彩评论