Date: 06.03.2012

test...">

Getting closest element with jQuery

I have this markup:

<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>

      

I want to get a div based read more button class="news-content"

. My jQuery code looks like this:

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

      

But it doesn't work. I have multiple posts on the page so I can't seem to do $('a.read-more')

.

+3


source to share


3 answers


.closest()

traverses the DOM tree. You need .next()

:



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

      

+7


source


The closest

[API] method gets its ancestor. You need the siblings

[API] method .



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

      

+5


source


You can use CSS selector:

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

      

I think this is better because modern browsers support native selector lookup.

0


source







All Articles