jQuery 选择器问题？答案

【问题标题】：jQuery Selector Problem?jQuery 选择器问题？
【发布时间】：2011-04-04 11:25:54
【问题描述】：

我在菜单中使用鼠标悬停功能。我已经使用它的类选择了一个特定的元素。要仅更改该元素而不是该类的所有元素，我可以使用“this”。但我想更改该类元素内的 h3 标签。再次是我悬停在上面的那个，而不是所有具有该类名的元素。

我尝试在“this”之后使用 > 元素，但它不起作用。

我该怎么做？我希望我已经解释得足够好。我希望你理解使用代码。

$('.slide').hover(
    function(){
        $(this>'h3').animate({
            height: '100%'
        });
    },
    function(){
        $(this>'h3').animate({
            height: '25px'
        });
    }
);

感谢所有答案。谢谢

【问题讨论】：

标签： javascript jquery javascript-framework

【解决方案1】：

您使用.find() 来获取this 中的<h3> 元素。

$('.slide').hover(
    function(){
        $(this).find('h3').animate({
            height: '100%'
        });
    },
    function(){
        $(this).find('h3').animate({
            height: '25px'
        });
    }
);

如果<h3>是直子，使用.children()效率会高一点：

$(this).children('h3').animate({

【讨论】：

【解决方案2】：

试试这个：

$(this).children('h3').animate();

【讨论】：

【解决方案3】：

用途：

$(this).find('h3')

或者：

$(this).children('h3')

【讨论】：

上下文可以是 DOM 元素。不需要额外的美元。好的，我看到这被编辑了，有利于.find

【解决方案4】：

尝试$(this).find("h3") 而不是$(this>'h3')。

【讨论】：

【解决方案5】：

你应该使用 $(this).find('h3')

  $('.slide').hover(
    function(){
        $(this).find('h3').animate({
            height: '100%'
        });
    },
    function(){
        $(this).find('h3').animate({
            height: '25px'
        });
    }
);

或者，如果您只希望 h3:s 直接位于 .slide 下方，则可以使用

$(this).children('h3')

【讨论】：

【解决方案6】：

以上所有答案都是正确的。您的选择器不起作用的原因是普通的“this”关键字指向实际的 DOM 元素。您必须像这样将“this”本身包装在一个 jQuery 对象中：$(this)，然后才能在其上使用任何 jQuery 方法。

【讨论】：