Probably simple jQuery selector question

Question

I have some code right now that executes when a link is clicked. The HTML is structured:

<a href='link1'>Stuff<span class='color-bar'></span></a>
<a href='link2'>Stuff<span class='color-bar'></span></a>
<a href='link3'>Stuff<span class='color-bar'></span></a>

With the jQuery like so:

$('a').liveQuery('click',function(event){
  ...
  ...
  $( selector ).animate({bottom:10},'slow');
}

My question is how do I target the specific '.color-bar' using $this? Before I had each one assigned an id, but then realized it was overkill and figured I could do it using the $this element.

I tried $( $this > '.color-bar' ) but that didn't work. Am I just getting syntax wrong or approaching it incorrectly? Thanks!

Answer 1

solution

$('.color-bar', $this)

or

$(this).find('.color-bar')

note

.find() is a bit faster than the first solution, because the first solution calls find anyway internally in jQuery. But it looks a bit more nice

Answer 2

$(this).find('.color-bar').animate({bottom:10},'slow');

Answer 3

$(this).children('.color-bar').animate({bottom:10},'slow');