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

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

这里是我的jQuery函数：

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

您可以查看jsfidde here。谢谢！

来源

2011-03-09 raeq

这就是this！

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

来源

2011-03-09 19:26:54 Intelekshual

这太棒了。谢谢！ – AndrewLeonardi 2017-01-26 19:55:29

使用$(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。

来源

2011-03-09 19:26:19

这是一个很好的答案。你也可以在children（）中使用选择器。所以，如果你只想要第一个跨度，你可以做.children（'span：first'） – mrtsherman 2011-03-09 19:29:20

@mrtsherman：是的，这是正确的。然而，如果你不需要，我会建议不要使用选择器 - 它需要解析并且每个元素都需要针对它进行测试，所以它更多的是性能。 – 2011-03-09 19:32:00

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

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

来源

2011-03-09 19:27:03 lindsten

如果它是你徘徊的div，那么你应该使用'$（this）'作为其他人所建议的...... – lindsten 2011-03-09 19:30:12

在这里你必须使用 '查找' 功能，另一种解决方案：

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

    );

来源

2011-03-09 23:11:04 vmolero

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

回答

相关问题