предыдущий(); и далее(); уточнение использования Jquery

у нас есть ряд 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 и добавлять классы next и previous. Но так как он ищет элементы .current, он их не найдет. Как я могу ссылаться на панель .current и addClass на следующий и предыдущий элементы .panel?

Спасибо.

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

jquery siblings addclass
person Milksamsa    schedule 21.06.2012    source источник

Ответы (4)


arrow_upward
4
arrow_downward

В соответствии с вашими потребностями вы можете использовать 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');

ДЕМО

person Sarfraz    schedule 21.06.2012
comment
Нет. Мне нужны ТОЛЬКО непосредственно следующий и предыдущий братья и сестры… Дело в том, что я не знаю, как выбрать следующий и предыдущий элементы .panel, начиная с .current (который имеет общий класс .panel с другими) - person Milksamsa; 21.06.2012

arrow_upward
1
arrow_downward

$('.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/

person PiTheNumber    schedule 21.06.2012

arrow_upward
1
arrow_downward

попробуй это:

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

http://jsfiddle.net/yxq39/

or:

$('.current').prevAll().addClass('previous');
$('.current').nextAll().addClass('next');
person undefined    schedule 21.06.2012

arrow_upward
0
arrow_downward

Вы делаете это правильно, просто добавьте следующее

$('.current').prev(".panel").addClass('previous');
$('.current').next(".panel").addClass('next');
person U.P    schedule 21.06.2012