问题描述:

I have the following layout:

<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>

I want to target the next .main and add .next to it using jquery. I'm trying to following but this doesn't work:

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

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

next.addClass('next');

here is a jsfiddle

网友答案:
$('.current').nextAll('.main').first().addClass('next')

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

next wasn't working because it only retrieves the immediate following sibling, or nothing if the selector doesn't match.

网友答案:

I recommend using jQuery's nextAll().

next() only returns the immediate sibling, while nextAll() returns all subsequent siblings.

Below, I'm using .eq(0) to return the first element in the set matched by nextAll():

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

Or as a one-liner, for brevity:

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

Try it with the snippet below:

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>
网友答案:

In your example, the next .main is a sibling of the .main .current element.

Instead of using current.next('.main'), use current.siblings('.main'). This will return a jQuery object that contains all the siblings of the current element that have the class main. Call first to get the first object.

To add a class to the next .main element, use this:

var current = $('.main.current');
current.siblings('.main').first().addClass('next');
相关阅读:
Top