Question

我在div s中有div s的结构，如下所示：

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

假设我点击其中一个内容div，其中包含a个类。是否可以通过点击的div 选择仅与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
}

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

使用jQuery可以做到这一点吗？

5 个答案: