javascript - 使用 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 的“连续 block ”。每个 block 中的第一个 div 具有类 first，最后一个 div 具有类 last。每个 block 位于一个 parent div 中( block 不能跨越 2 个或更多 parent div)。

假设我单击了具有 a 类的内部 div 之一。是否可以仅选择与单击的div位于同一 block 中的div？

你会怎么做？ (如果可能，使用 jQuery。)

Answer 1

这将为您提供当前 div 的所有 sibling :

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

如果您只想要每个 .first 到 .last block 中的内容，那么您需要如下内容:

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