如何使用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的子元素？

回答

相關問題