无法使用jQuery选择第一个子元素

Question

我不明白我做错了什么。我有以下的html元素：

<div id="accordion">
    <h3>
        <a href="#">Section 1</a></h3>
    <div>
        <p>
            Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque.
            Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a
            nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada.
            Vestibulum a velit eu ante scelerisque vulputate.
        </p>
    </div>
    <h3>
        <a href="#">Section 2</a></h3>
    <div>
        <p>
            Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus
            hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum
            tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.
        </p>
    </div>                                    
</div>

这个元素（<div id='accordion'>）清楚地显示它的第一个子元素是h3标签，下一个子元素是div标签，然后是h3等等。

我想选择这个div的第一个子元素。换句话说，我想选择第一个h3标签。

因此，我尝试过：

```javascript $('#accordion').children(':first-child'); ```

但是这不起作用。

    $("#accordion:first-child").css("font-size","30px");

也可以。

     $("#accordion:first").css("font-size","30px");

双向方式将30像素字体应用于主div元素（<div id='accordion'>）

我做错了什么，我只想选择手风琴的第一个子元素，很明显是h3标签

编辑

哇，我只是缺少了一个空格。 这个页面 没有包含这个空格。

我不得不改变我的代码

$("#accordion:first").css("font-size","30px");

TO

$("#accordion :first").css("font-size","30px");

- Tono Nam

---

顺便提一下，element:first-child 返回的是它们父元素的第一个子元素。 - Viruzzo

哇，我只是缺少一个空格。这个页面没有包括这个空格。实际上，它是有的。父元素是 div，他们选择了第一个子元素是 span 的元素。因此他们的选择器是 div span:first-child，他们想要的是第一个祖先是 div 的 span 元素。 - Chad

@Chad...使用div的祖先，而不是父元素。空格字符是后代组合器！ - Šime Vidas

@ŠimeVidas 显然，.children().first() 是最快的，速度相差非常大：http://jsperf.com/first-vs-children/2 - Chad

@Chad 是的，它要快得多。这是可以预料的，因为.children().first()大致相当于.children[0]，而.children(':first')在每个子元素上执行选择器检查。因此，我建议使用.children().first()甚至.children().eq(0)... - Šime Vidas

Answer 1

您需要将父元素的id与:first-child选择器分开。此外，frst-child选择器将选择所有第一个子元素，而不仅仅是一个。要仅选择一个，请使用:first选择器。

$("#accordion h3:first").css("font-size","30px");

这是 CSS 选择器的工作方式（jQuery 中大量使用）。

在此处阅读 CSS 后代选择器。

有时，作者可能希望选择器匹配文档树中另一个元素的后代元素（例如，“匹配包含在 H1 元素中的那些 EM 元素”）。后代选择器在模式中表达了这种关系。后代选择器由两个或多个由空格分隔的选择器组成。

此外，根据 jQuery 文档，有更好的方法来检索元素的第一个子元素，以实现更好的性能。

因为 :first 是 jQuery 的扩展而不是 CSS 规范的一部分，使用 :first 的查询无法利用本机 DOM querySelectorAll() 方法提供的性能提升。要在选择元素时实现最佳性能，请先使用纯 CSS 选择器选择元素，然后使用 .filter(":first")。

- Jose Faeti

---

不，那不是这样的。这将选择所有第一个子代...所以，在这种情况下，它选择H3，但也选择了两个A元素和两个P元素... 亲自看看： http://jsfiddle.net/MxmTP/1/ - Šime Vidas

@Sime 是的，他强调了空格的重要性，没有考虑到这一点，现在已经使用 :first 进行了纠正。 - Jose Faeti

Answer 2

请阅读有关:first-child选择器的信息，您需要找到的是：

$('#accordion h3:first-child').css('font-size', '30px');

来自jQuery API文档：

描述：选择所有是其父元素的第一个子元素的元素。

因此，选择器#accordion:first-child是#accordion元素，它是其父元素的第一个子元素；而#accordion h3:first-child是包含在#accordion中的h3，它是其父元素的第一个子元素。

- Chad

Answer 3

这个

$( '#accordion' ).children( ':first' ).css( ...

- Šime Vidas

Answer 4

试试这个：

$('#accordion').children().first().css(...

- ranjez

Answer 5

使用jQuery first-selector 和 first-child 选择器是有区别的。

由于存在多个第一个子元素，您应该仅使用第一个选择器，否则它可能会将所有第一个子元素都选中，正如@Jose所提到的那样。

$("#accordion h3:first").css("font-size","30px");

 OR


 $("#accordion h3:first").css("font-size","30px");

无论哪种方式都应该可以工作！

- Prabhakar

Answer 6

$(":first", "#accordion").css("font-size", "30px")

- DefyGravity