Question

我正在尝试做一些非常基本的事情，但由于某种原因它没有用。

这是我的HTML：

<div class="col-xs-6 bbb b-left roll" style="transform: translate(0px, 0px);">
    <section class="overlay first" style="background:url('/css/rollsright-0-0.jpg');
         background-size:cover;background-repeat: no-repeat;background-position:bottom;">
    </section>
</div>

<div class="col-xs-6 bbb b-right roll" style="transform: translate(0px, 0px); opacity: 1;">
    <section class="overlay first" style="background:url('/css/rollsright-1-0.jpg');
         background-size:cover;background-repeat: no-repeat;background-position:bottom;">
    </section>
</div>

<div class="col-xs-6 bbb b-left roll" style="transform: translate(0px, 0px);">
    <section class="overlay first" style="background:url('/css/rollsright-0-1.jpg');
         background-size:cover;background-repeat: no-repeat;background-position:top;">
    </section>
</div>

<div class="col-xs-6 bbb b-right roll" style="transform: translate(0px, 0px);">
    <section class="overlay first" style="background:url('/css/rollsright-1-1.jpg');
         background-size:cover;background-repeat: no-repeat;background-position:top;">
    </section>
</div>

当我使用$(".roll")选择$(".roll").eq(0)的第一个实例时（总共有4个，或者从零索引开始的3个）我想知道使用jquery后面有多少个滚动兄弟。我应该得到3，但我得到1。

为什么会这样？

$(".roll").eq(0).next(".roll").length

输出：

1

Answer 1

.next()会立即获得兄弟姐妹，您必须使用.nextAll(".roll")来获取课程roll的所有sibligs：

$(".roll").eq(0).nextAll(".roll").length

希望这有帮助。

console.log( $(".roll").eq(0).nextAll(".roll").length );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-6 bbb b-left roll" style="transform: translate(0px, 0px);">
  <section class="overlay first" style="background:url('/css/rollsright-0-0.jpg');background-size:cover;background-repeat: no-repeat;background-position:bottom;">
  </section>
</div>
<div class="col-xs-6 bbb b-right roll" style="transform: translate(0px, 0px); opacity: 1;">
  <section class="overlay first" style="background:url('/css/rollsright-1-0.jpg');background-size:cover;background-repeat: no-repeat;background-position:bottom;">
  </section>
</div>
<div class="col-xs-6 bbb b-left roll" style="transform: translate(0px, 0px);">
  <section class="overlay first" style="background:url('/css/rollsright-0-1.jpg');background-size:cover;background-repeat: no-repeat;background-position:top;">
  </section>
</div>
<div class="col-xs-6 bbb b-right roll" style="transform: translate(0px, 0px);">
  <section class="overlay first" style="background:url('/css/rollsright-1-1.jpg');background-size:cover;background-repeat: no-repeat;background-position:top;">
  </section>
</div>

Jquery获得所有下一个兄弟姐妹的长度

1 个答案: