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