Должен ли я использовать .find (". Foo .bar") или .children (". Foo"). Children (". Bar")?

Question

При использовании jQuery для обхода DOM оба они возвращают одинаковые результаты (я полагаю):

$("whatever").find(".foo .bar")
$("whatever").children(".foo").children(".bar")

Что предпочтительнее использовать?

Answer 1

Они не эквивалентны, как я объясню ниже, но если скорректировать их в соответствии, .children() для скорости, .find() для краткости (дополнительная работа внутри Sizzle анализируя это для начала), вы решаете, что важнее.

Первый имеет разные результаты, но если вы знаете, что они дети, вы можете сделать это:

$("whatever").find("> .foo > .bar")
//equal to...
$("whatever").children(".foo").children(".bar")

Этот будет эквивалентен вашей второй функции. В настоящее время, первое, что у вас есть, это найдет:

<whatever>
  <div class="foo">
    <span>
     <b class="bar">Found me!</b>
    </span>
  </div>
</whatever>

Второе не будет, требуется, чтобы .foo был прямым потомком whatever и .bar был прямым потомком этого, .find(".foo .bar") позволяет они должны быть любого уровня, вплоть до .bar у потомка .foo.

Answer 2

В качестве альтернативы:

$('whatever .foo .bar')

(или >.foo>.bar, если вы хотите только прямых детей.)

Пока whatever является стандартным селектором CSS3 (без использования каких-либо специфичных для Sizzle расширений), один селектор, относящийся к документу, такой как приведенный выше, будет передан document.querySelectorAll в современных браузерах, который будет намного быстрее, чем ручная прогулка по дереву Сиззл.

[Хотя теоретически можно использовать element.querySelectorAll для быстрого выполнения запросов вида $(...).find(...), в настоящее время jQuery не будет использовать этот метод из-за различий во мнениях относительно того, как относительные селекторы разрешаются между селекторами. Стандарт API и традиционное поведение jQuery в области видимости.]