可能是简单的 jQuery 选择器问题

Question

我现在有一些代码在单击链接时执行。 HTML 是结构化的：

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

像这样使用 jQuery：

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

我的问题是如何使用 $this 来定位特定的“.color-bar”？在我为每个人分配一个 id 之前，我意识到这太过分了，并认为我可以使用 $this 元素来做到这一点。

我尝试了$( $this > '.color-bar' )，但没有奏效。我只是弄错了语法还是错误地接近了它？谢谢！

Answer 1

解决方案

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

或

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

注意

.find() 比第一个解决方案快一点，因为第一个解决方案调用 find 无论如何在 jQuery 内部。不过看起来更好看一点

Answer 2

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

Answer 3

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