jquery - 使用 Jquery 选择第一个 child 的 child

Question

我有一个像这样的 html 结构:

<div class="one">
  <div id="two">
    <h2>Any</h2>
    <h4>Any</h4>
  </div>
  <div id="three">
  </div>
</div>

我必须选择第一个和第一个子元素，在上面的例子中:#two, h2, h4，而不知道第一个元素的 id 名称。我怎样才能做到这一点？

我可以选择第一个元素，但如果我将 content().find() 添加到 div:first 我无法选择它的子元素:

$(document).ready(function() {
    $(".one").mouseover(function () {  
        $(this).children('div:first').contents().find('h2,h4').stop(true, true).fadeIn('fast');
     });

    $(".one").mouseout(function () { 
        $(this).children('div:first').contents().find('h2,h4').stop(true, true).fadeOut('fast');
    });
});

最终且有效(无闪烁!)的代码是:

$(".one").hover(function () {  
$(this).children('div:first').stop(true, true).fadeIn('fast');
}, function() {;
$(this).children('div:first').stop(true, true).fadeOut('fast');
});

我想在来这里提问之前我必须给自己更多的时间思考。不管怎样，我了解了 .andSelf() 和一些 Jquery 语法。再次感谢。

Answer 1

您不需要同时使用 find() 和 contents() - 试试这个:

$(document).ready(function() {
    $(".one").mouseover(function () {  
        $(this).children('div:first').children('h2,h4').stop(true, true).fadeIn('fast');
     });

    $(".one").mouseout(function () { 
        $(this).children('div:first').children('h2,h4').stop(true, true).fadeOut('fast');
    });
});

如果您还需要保留节点集中的“第一个”元素，请在第二个 .children() 之后使用 .andSelf() (根据 @Felix的答案)。