Можно ли это сделать с помощью jQuery?

Question

У меня есть структура div с внутренней div с, что-то вроде этого:

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

Как вы можете видеть, что есть «последовательные блоки» внутренних div с, которые имеют класс a. Первый div в каждом блоке имеет класс first, а последний div имеет класс last. Каждый блок находится в одном parentdiv (блок не может охватывать 2 или более parentdiv s).

Скажем, я нажимаю на один из внутренних div с классом a. Возможно ли выбрать только div s, которые находятся в одном и том же блоке с нажатым div?

Как вы это сделаете? (если это возможно, с помощью JQuery.)

Answer 1

Это даст вам все братские текущего DIV:

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

Если вы просто хотите те, от каждого .Первый до .last блока, то вы хотите что-то вроде :

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

(Это предполагает, что они всегда будут последовательными Это становится намного более сложным, если они не будут это также не будет работать правильно, если есть две последовательные группы без разделения Это должно быть довольно легко... изменить его для работы в этих ситуациях.)

Edit: Это должно работать во всех ситуациях

$("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 OnClick событие каждого Див, принявшего "а", как класс этой функции проходит "это" в качестве параметра

Answer 3

Что-то вроде этого должно работать

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

Вы также можете сделать что-то подобное, как это:

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

Это будет выбрать только див с классом «а» и т.д.

EDIT: Хорошо. Я вижу, что вы хотите сделать.

$(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'); 
    } 
}); 

Это должно быть сделано. Конечно, вам нужно что-то делать с узлами, когда вы перебираете их. Не самый изящный из решений (возможно, что-то лучше там), но он должен работать.

В будущем, однако, попробуйте лучше сформулировать свой вопрос, вместо того чтобы опрокидывать всех.

Answer 4

Другие ответчики не понимают, что вы просите о том, чтобы собрать всех братьев и сестер между «первым» и «последним» элементом, а не только всеми братьями и сестрами. Чтобы облегчить это, вы должны обернуть каждый блок в div так:

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

Теперь, если один из .block .a элементов нажата, вы можете получить все его братья и сестры просто делать

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

siblings будут все элементы div.a, которые содержатся одним и тем же родителем.

Answer 5

«последний + *» должен включать замыкающий элемент. Это выберет первый и последний div для одного и того же «блока».

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