jQuery Traversing - 最好的使用方法？

Question

我一直致力于做一些简单的事情..但不确定最好的方法。 我已经准备好通过 jQuery 文档，但由于这个地方提供了合理的建议 - 我会在这里提出问题。

基本上是遍历。

假设我有这个最小的代码作为一个简单的例子（同一页面上有多个元素）：

<div class='collab'>
<div class='collab_text'>text</div><!--close collab_text-->
</div><!--close_collab-->

<div class='collab'>
<div class='collab_text'>text</div><!--close collab_text-->
</div><!--close_collab-->

在 jQuery 中，我只想在悬停时淡化 collab_text。 所以我有：

$(".collab").hover(function(){
        $(".collab_text").fadeTo(700, 1.0);
    },function(){
        $(".collab_text").fadeTo(300,0.00001);                          
    });

当我将鼠标悬停在 1 个项目上时，这显然会显示所有元素的所有 collab_text。 所以我的问题是只显示悬停的collab_text 的正确方法是什么。 .next() ?, .find() ?

我知道我的代码应该是：

$(".collab").hover(function(){
            $(this).XXX(".collab_text").fadeTo(700, 1.0);
        },function(){
            $(this).XXX(".collab_text").fadeTo(300,0.00001);                            
        });

任何信息将不胜感激。

谢谢。

Answer 1

您可以在上下文中使用find 或$()

$(this).find(".collab_text").fadeTo(700, 1.0);

或

$('.collab_text', this).fadeTo(700, 1.0);

它们是相等的：

在内部，选择器上下文是用 .find() 方法实现的， 所以 $('span', this) 等价于 $(this).find('span')。

http://api.jquery.com/jQuery/

Answer 2

在你的情况下，我会使用children('.collab_text'):

$(".collab").hover(function(){
    $(this).children(".collab_text").fadeTo(700, 1.0);
},function(){
    $(this).children(".collab_text").fadeTo(300,0.00001);                          
});​

示例 - http://jsfiddle.net/edjQ7/