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无法正常工作，因为它只会在兄弟之后检索立即，如果选择器不匹配，则无效。

Answer 2

我建议使用jQuery的nextAll()。

next()仅返回直接兄弟，而nextAll()则返回所有后续兄弟。

下面，我使用.eq(0)返回nextAll()匹配的集合中的第一个元素：

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

或作为one-liner，为简洁起见：

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

使用以下代码段尝试：

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

.next {
  background-color: #F00;
}
.main.current {
  background-color: #0F0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="boxes">
  <div class="box main current">
    ... content main current ...
  </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 main ...
  </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>

Answer 3

在您的示例中，下一个.main 是.main .current元素的兄弟。

不使用current.next('.main')，而是使用current.siblings('.main')。这将返回一个jQuery对象，该对象包含具有类main的当前元素的所有兄弟节点。调用first获取第一个对象。

要将类添加到下一个.main元素，请使用：

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

当它不是兄弟姐妹时，如何定位下一个div？

3 个答案: