Получение ближайшего элемента с помощью jQuery

Question

У меня есть эта разметка:

<div class="news-listItem">
     <p class="date">Date: 06.03.2012</p>
     <h2><a href="#">test aaaaa</a></h2>
     <div class="news-content">Lorem ipsum lorem ipsum Lorem ipsum lorem ipsum Lorem ipsum lorem ipsum Lorem ipsum lorem ipsum Lorem ipsum lorem ipsum Lorem ipsum lorem ipsum Lorem ipsum lorem ipsum</div>
     <a href="#" class="read-more">Read more</a>
</div>

Я хочу получить кнопку «Читать далее» на основе div class="news-content".Мой код jQuery выглядит так:

$('.news-content').closest('a.read-more').on('click', function(){
// code here
});

Но это не работает.У меня есть несколько сообщений на странице, поэтому я не могу сделать $('a.read-more').

Answer 1

.closest() пересекает дерево DOM.Что вам нужно, это .next():

$('.news-content').next('a.read-more')

Answer 2

Метод closest ^[API] получает предка. Вам нужен метод siblings ^[API] .

$('.news-content').siblings('a.read-more').on('click', function(){
// code here
});

Answer 3

Вы можете использовать селекторы CSS:

$('.news-content+a.read-more').on('click', function(){
    // code here
});

Я думаю, что это лучше, потому что современные браузеры поддерживают встроенный поиск селектора.