Jquery 当下一个div'；他不是兄弟姐妹吗？

我的布局如下：

<div class="boxes">
     <div class="box main current">
          ... content ...
     </div>
    <div class="box sub">
          ... content ...
     </div>
    <div class="box sub">
          ... content ...
     </div>
    <div class="box sub">
          ... content ...
     </div>
    <div class="box sub">
          ... content ...
     </div>

     <div class="box main">
          ... content ...
     </div>
    <div class="box sub">
          ... content ...
     </div>
    <div class="box sub">
          ... content ...
     </div>
    <div class="box sub">
          ... content ...
     </div>
    <div class="box sub">
          ... content ...
     </div>

     <div class="box main">
          ... content ...
     </div>
    <div class="box sub">
          ... content ...
     </div>
    <div class="box sub">
          ... content ...
     </div>
    <div class="box sub">
          ... content ...
     </div>
    <div class="box sub">
          ... content ...
     </div>

     <div class="box main">
          ... content ...
     </div>
    <div class="box sub">
          ... content ...
     </div>
    <div class="box sub">
          ... content ...
     </div>
    <div class="box sub">
          ... content ...
     </div>
    <div class="box sub">
          ... content ...
     </div>
</div>

---

在您的示例中，下一个

.main

是

.main.current

元素的同级

不要使用

current.next（'.main'）

，而要使用

current.sides（'.main'）

。这将返回一个jQuery对象，该对象包含当前元素中类为

main

的所有同级元素。调用

first

获取第一个对象

要将类添加到下一个

.main

元素，请使用以下命令：

var current = $('.main.current');
current.siblings('.main').first().addClass('next');

---

next

不起作用，因为它只检索紧跟其后的同级，如果选择器不匹配，则不检索任何内容。

我建议使用jQuery的

next（）

仅返回直接同级，而

nextAll（）

返回所有后续同级

下面，我使用

.eq（0）

返回集合中与

nextAll（）

匹配的第一个元素：

var$current=$（'.main.current'）；
var$next=$current.nextAll（'.main'）.eq（0）；
$next.addClass（'next'）；

或者，为了简洁起见：

$('.main.current').nextAll('.main').eq(0).addClass('next');

---

请使用下面的代码段进行尝试：

var$current=$（'.main.current'）；
var$next=$current.nextAll（'.main'）.eq（0）；
$next.addClass（'next'）
。下一步{
背景色：#F00；
}
.main.电流{
背景色：#0F0；
}

... 内容主要当前。。。
... 内容。。。
... 内容。。。
... 内容。。。
... 内容。。。
... 内容主。。。
... 内容。。。
... 内容。。。
... 内容。。。
... 内容。。。
... 内容。。。
... 内容。。。
... 内容。。。
... 内容。。。
... 内容。。。
... 内容。。。
... 内容。。。
... 内容。。。
... 内容。。。
... 内容。。。
尝试选择
$（'.box.current'）这将有助于您使用选择器：使用
兄弟姐妹（）
的问题是，即使之前的兄弟姐妹也会匹配。如果
.current
不是第一个元素，
.next
可能会被错误地标识为在
之前出现。current
：你完全正确，我举了一个例子来测试它，并更新了我的答案！
$('.current').nextAll('.main').first().addClass('next')

$('.main.current').nextAll('.main').eq(0).addClass('next');