не в состоянии выбрать первого ребенка с 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

, в результате я попытался:

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

также

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

в обоих случаях применяется шрифт 30pxк основному элементу div (<div id='accordion'>)

что я делаю не так, я хочу выбрать только первого ребенка аккордеона, это явно тег h3

Edit

я просто пропустил пробел. эта страница не включает темп.

Мне пришлось изменить свой код с

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

TO

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

Answer 1

Вы должны отделить идентификатор родителя от селектора :first-child. Кроме того, селектор frst-child будет выбирать все элементы first-child, а не только один. Чтобы выбрать только один, вы должны использовать селектор :first.

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

Так работает селектор css (который интенсивно использует jQuery).

Взять чтение на css потомок здесь.

Иногда авторам может потребоваться, чтобы селекторы соответствовали элементу, являющемуся потомком другого элемента в дереве документа (например, «Соответствие» те элементы EM, которые содержатся в элементе H1 "). Потомок селекторы выражают такие отношения в шаблоне. потомок селектор состоит из двух или более селекторов, разделенных белым пространство .

Кроме того, согласно документам jQuery, существуют лучшие методы для получения первого дочернего элемента для достижения лучшей производительности.

Потому что: сначала расширение jQuery, а не часть CSS спецификация, запросы, использующие: сначала не может воспользоваться повышение производительности обеспечивается родным DOM querySelectorAll () метод. Для достижения максимальной производительности при использовании: сначала выберите элементы, сначала выберите элементы, используя чистый селектор CSS, затем используйте .filter (": first").

Answer 2

Читайте о селекторе :first-child, то, что вы ищете:

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

Из документов API jQuery:

Описание : Выбирает все элементы, которые являются первыми дочерними элементами их родителей.

Таким образом, селектор #accordion:first-child является элементом #accordion, который является первым дочерним элементом.его родителя;в то время как #accordion h3:first-child - это h3, содержащийся в #accordion, который является первым дочерним элементом , это родитель.

Answer 3

Попробуйте это:

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

Answer 4

Это

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

Answer 5

Существует различие между использованием jquery first-selector и first-child selector.

Поскольку у вас есть несколько элементов first-child, вы должны использовать firstтолько селектор, в противном случае он может использовать все элементы первого потомка, как @Jose упомянул.

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

 OR


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

В любом случае это должно работать!

Answer 6

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