Есть ли более эффективный способ написать $ ('parent> child')?

Question

Учитывая следующий селектор $ ('parent> child'), я считаю, что jQuery сначала запросит все «дочерние» элементы, а затем отфильтрует те, которые являются прямыми потомками «parent». Это может быть очень неэффективно.

Мой первый инстинкт - использовать $ ('parent'). Find ('child'), но результат явно не совпадает с $ ('parent> child').

Есть ли лучший способ написать этот селектор?

Answer 1

jQuery имеет метод .children(), который выбирает только непосредственных детей.

Кроме того, не беспокойтесь об этом!Если у вас нет гигантского приложения или оно из любопытства, нет причин вникать в это.Если вы слишком часто используете селектор, просто «кешируйте» его: $tabs = $('.tabs').Хорошей практикой является использование $ перед переменными, которые представляют селекторы.

Answer 2

Я полагаю, что jQuery сначала запросит все «дочерние» элементы, а затем отфильтрует те, которые являются прямыми потомками «родительских» элементов.

На самом деле это предположение не весьма правильно:

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

Итак, пока:

• вы не делаете jQuery-специфические селекторы, такие как :first,
• , вы можете смело предположить, что не первичный браузер ,

… вам будет хорошо использовать parent > child, не заботясь о производительности.

Если вам понадобится какой-либо из специфических селекторов jQuery, имейте это в виду:

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

Toдобиться максимальной производительности при использовании: сначалачтобы выбрать элементы, сначала выберите элементы, используя чистый селектор CSS, затем используйте .filter (": first").

Answer 3

$('parent > child') извлечет все первые экземпляры потомка. Если у вас есть div с div в пределах div, $('div#one > div') вернет только div 2-го уровня вместо всех дочерних элементов. Я не вижу в этом ничего плохого в том, что касается эффективности. Однако предложение Радагайса тоже работает.

<div id="one">
  <div> <!-- returned -->
    <div></div> <!-- ignored -->
    <div></div> <!-- ignored -->
    <div></div> <!-- ignored --> 
  </div>
  <div> <!-- returned -->
    <div></div> <!-- ignored -->
    <div></div> <!-- ignored -->
    <div></div> <!-- ignored --> 
  </div>
</div>