使用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 。 每個塊位於一個parent div （塊不能跨越2個或多個parent div ）。

假設我點擊了內部A類a div之一。 這有可能僅選擇div S的是與點擊同一個塊div ？

你會怎么做？ （如果可能，請使用jQuery。）

Answer 1

這將為您提供當前div的所有同級：

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

如果只需要每個.first到.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

這樣的事情應該工作

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

那應該做。 當然，當您遍歷節點時，您需要對節點做一些事情。 不是最優雅的解決方案（可能有更好的解決方案），但是它應該可以工作。

不過，在將來，請嘗試更好地闡明您的問題，而不要否決每個人。

Answer 3

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

   //Do other things
}

將每個以“ a”為類的Div的onclick事件綁定到此函數，並將“ this”作為參數

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