如何使用 JQuery 仅显示 div 的子元素？答案

【问题标题】：How to use JQuery to show a div's child elements only?如何使用 JQuery 仅显示 div 的子元素？
【发布时间】：2011-07-12 04:25:27
【问题描述】：

所以我有这个 jquery 函数，它应该在悬停时显示一个类的隐藏跨度。如何设置函数，使其仅显示所选 div 的子跨度（而不是显示页面上的所有跨度）？

这是我的 jquery 函数：

$(".thumb").hover(
    function() {
       $(".blurb").show();
    },
    function(){
       $(".blurb").hide();
    }
);

您可以查看jsfidde here。谢谢！

【问题讨论】：

标签： javascript jquery html css jquery-selectors

【解决方案1】：

这就是this 的用途！

$(".thumb").hover(
    function() {
       $(this).children('.blurb').show();
    },
    function(){
       $(this).children('.blurb').hide();
    }
);

【讨论】：

这太棒了。谢谢！

【解决方案2】：

使用$(this).children() 而不是再次执行全局查询：

$(".thumb").hover(function() {
    $(this).children().show();
}, function() {
    $(this).children().hide();
});

工作演示：http://jsfiddle.net/h5x3f/2/

注意：如果您不介意支持 Internet Explorer 6，您可以完全避免使用 jQuery/JavaScript，并使用 CSS 的 :hover 伪类，它甚至可以在禁用 JS 的情况下使用。或者你可以使用像ie-7.js 这样的垫片来为你处理:hover。有关示例，请参阅this variation of your fiddle。

【讨论】：

这是一个很好的答案。您也可以在 children() 中使用选择器。所以如果你只想要第一个跨度，你可以做 .children('span:first')
@mrtsherman：是的，没错。但是，如果您不需要，我建议不要使用选择器 - 它需要解析并且每个元素都需要针对它进行测试，因此它更像是性能猪。

【解决方案3】：

先选择 div，然后选择其子项，例如

$("#mydiv").children(".blurb").show();

【讨论】：

如果它是您悬停的 div，那么您应该按照其他人的建议使用 $(this)...

【解决方案4】：

这里有另一个使用“查找”功能的解决方案：

    $(".thumb").hover(
        function() {
            $(this).find(".blurb").show();
        }, function() {
            $(this).find(".blurb").hide();
        }

    );

【讨论】：