Date: 06.03.2012

test...">

Clever Geek Handbook

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

jquery jquery-selectors

Mythriel 06 Mar 12 at 20:23

source to share

3 answers

.closest()

traverses the DOM tree. You need .next()

:

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

      

        
        
        
      

    

+7

zerkms 06 Mar 12 at 20:26

source to share

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

FishBasketGordo 06 Mar 12 at 20:27

source to share

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

Anber 06 Mar 12 at 20:38

source to share

More articles:

All Articles