jquery - 上一个（）；和下一个（）；使用说明 Jquery

Question

我们有一系列 div，我们想为当前选定的 DIV 的下一个和上一个兄弟分配不同的类。

这是我们的代码：

<div class="panel">DIV content 1</div>
<div class="panel current">DIV content 2</div> //THIS IS THE CURRENTLY SELECTED PANEL
<div class="panel">DIV content 3</div>
<div class="panel">DIV content 4</div>
<div class="panel">DIV content 5</div>

据我了解，以下 JQuery 代码将查找 .current 的兄弟姐妹并添加下一个和上一个类。但由于它正在寻找 .current 元素，它不会找到 em。如何将 .current 面板和 addClass 引用到下一个和上一个 .panel 元素？

谢谢你。

$('.current').prev().addClass('previous');
$('.current').next().addClass('next');

Answer 1

根据您的需要，您可以使用siblings(), nextUntil, prevUntil, nextAll,prevAll函数。next()和将prev()分别让您进入上一个或下一个元素。

//To select all previous elements of `.current` element:
$('.current').prevAll('.panel').addClass('previous');
//To select all next elements of `.current` element:
$('.current').nextAll('.panel').addClass('next');

演示

Answer 2

$('.current').prev()在 .current 之前为您提供一个元素：

<div class="panel">DIV content 1</div>

$('.current').next()在 .current 之后为您提供一个元素：

<div class="panel">DIV content 3</div>

见演示：http: //jsfiddle.net/ssNUN/

如果要获取所有 prev 或 next 元素，请使用nextUntil () 和prevUntil ()。

见演示：http: //jsfiddle.net/YfV5x/

Answer 3

尝试这个：

$('.current').prevUntil('.panel:first').addClass('previous');
$('.current').nextUntil('.panel:last').addClass('next');

http://jsfiddle.net/yxq39/

或者：

$('.current').prevAll().addClass('previous');
$('.current').nextAll().addClass('next');

Answer 4

您做得对，只需添加以下内容

$('.current').prev(".panel").addClass('previous');
$('.current').next(".panel").addClass('next');