jQuery Find не работает для: сначала

Question

Я пытаюсь найти некоторые дочерние элементы в родительском элементе ul. Но мне нужно только найти первый. Вот что я использую

$('div.item a').click(function() {
    $(this).parent().next('ul.subItems').find('a:first').addClass('selected');
});

HTML:

<div class="item"><a id="main5830" href="http://www.mysite.com">Test</a></div>
<ul class="subItems">
<li><a>test 1</a></li>
<li><a>test 2</a></li>
<li><a>test 3</a></li>
</ul>

Я бы хотел, чтобы в тесте 1 был выбран класс.

По какой-то причине это не выбор первого a внутри UL или НИЧЕГО в элементе UL. Я что-то здесь не так сделал?

Answer 1

Это работает, просто нужно использовать return false; (или event.preventDefault();) в конце обработчика события щелчка, чтобы предотвратить привязку по умолчанию.

$('div.item a').click(function() {
    $(this).parent().next('ul.subItems').find('a:first').addClass('selected');
    return false;
});

или

$('div.item a').click(function(e) {
    e.preventDefault();
    $(this).parent().next('ul.subItems').find('a:first').addClass('selected');
});

Вот Рабочая демонстрация , показывающая, как она работает