jquery - 如果下一个 div 不是 sibling ，我该如何定位它？

Question

我有以下布局:

<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 并使用 jquery 将 .next 添加到它。我正在尝试关注，但这不起作用:

var current = $('.main.current');

var next = current.next('.main');
next.addClass('next');

here is a jsfiddle

Answer 1

$('.current').nextAll('.main').first().addClass('next')

Updated your JSFiddle :) Example when current is not the first one

next 没有工作，因为它只检索紧随其后的 兄弟，如果选择器不匹配，则不检索任何内容。