Как выбрать конкретный элемент в jQuery

Question

У меня следующий синтаксис html

<ul>
<li class="heading">link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li class="heading">link</li>    
<li>link</li>
<li>link</li>
<li>link</li>
<li class="heading">link</li>
</ul>

Я хочу выбрать первый элемент .heading, который идет после обычного элемента li, который я нажимаю. Я пытался использовать функцию .closest (), но я не сделалне могу сделать это правильно. С jQuery

Answer 1

Внутри обработчика click do:

$(this).nextAll('.heading:first');

nextAll() извлекает все братья и сестры после текущего элемента, которые соответствуют селектору, поэтому используйте *Селектор 1009 * предназначен только для первого.

nextAll не следует путать с next, который рассматривает только следующий элемент (и вернет его, только если онсоответствует заданному селектору).

closest не сработал, поскольку он проверяет только предков текущего элемента, где-как мы хотим получить братьев и сестер.

Вы можете увидеть JS Fiddle этой работы здесь;http://jsfiddle.net/kuroir/5e3gz/1/

Answer 2

Используйте селектор «соседний брат», который является знаком плюс:

$('.heading+li')

Выбирает все элементы li, которые идут сразу после элемента с class='heading'.

Обратите внимание, что это стандартный CSS, поэтому вышеупомянутый селектор также будет работать в ваших таблицах стилей (поддерживается во всех браузерах, кроме IE6), например:

.heading+li { .... }

См. Также http://quirksmode.org/css/selector_adjacent.html для описания работы этого селектора.

Answer 3

вы можете сделать это:

$('li').click(function(){
    $(this).nextAll('li.heading:first'); //This selects the one you want
});

Проверьте это для получения дополнительной помощи: http://api.jquery.com/next/