使用jQuery可以做到這一點嗎？

Question

我有內部div S的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> 

正如你所看到的，存在具有a類內div S的「連續的塊」。第一個div在每個塊有first類，最後div有last類。每個塊在一個parentdiv（塊不能跨越2或更多parentdiv s）。

說我點擊內部div其中有a類。是否有可能選擇只有div這是在同一塊與點擊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)")); 
}) 

（假設他們永遠是連續的，如果他們不是它變得複雜多了它也不會正確，如果有不分離的兩個連續組的工作應該是相當容易的。修改它以在這些情況下工作。）

編輯：這應該在所有情況下

$("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 
} 

綁定工作，每一個事業部的有onclick事件 「a」 作爲類此功能通過 「本」 爲參數

Answer 3

像這樣的東西應該工作

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

你也可以做類似這樣的：

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

這將與 「A」 級等

編輯只選擇的div：好的。我明白你想要做什麼。

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

應該這樣做。當然，當你遍歷它們時，你需要對節點做些什麼。不是最優雅的解決方案（可能有更好的方法），但它應該有效。

未來雖然，只是嘗試和更好地表達你的問題，而不是downvoting每個人。

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

'last + *'將包含關閉元素。 這將爲同一個「塊」選擇第一個和最後一個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'); 
}