Question

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

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

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

我可以选择第一个元素但是如果我添加内容（）。find（）到div：首先我不能选择它的子元素：

$(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');
    });
});

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

Answer 2

您可以使用children ^[docs]和andSelf ^[docs]：

$(".one").mouseover(function () {  
    $(this).children().first().children('h2, h4').andSelf()....
});

如果您不想将第一个孩子（父母）添加到集合中，请忽略andSelf。你的问题在这一点上有点模糊。但我认为你实际上不想选择第一个孩子，只选择孩子。如果隐藏元素，其子元素也会隐藏。

Answer 3

此：

  $(this).children('div:first').contents().find('h2,h4').stop(true, true).fadeIn('fast');

要：

  $(this).children('div:first').children('h2,h4').stop(true, true).fadeIn('fast');

用Jquery选择第一个孩子的孩子

3 个答案: