当前位置: 动力学知识库 > 问答 > 编程问答 >

jquery - How do I target the next div when it's not a sibling?

问题描述:

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');
分享给朋友:
您可能感兴趣的文章:
随机阅读: