Чтобы выбрать дочерний элемент node в jQuery, можно использовать children(), а также find().
Например:
$(this).children('.foo');
дает тот же результат, что и:
$(this).find('.foo');
Теперь, какой вариант является самым быстрым или предпочтительным и почему?
children() просматривает только непосредственные дочерние элементы узла, в то время как find() обходит весь DOM ниже узла, поэтому children() должны быть быстрее с учетом эквивалентных реализаций. Однако find() использует собственные методы браузера, а children() использует JavaScript, интерпретируемый в браузере. В моих экспериментах нет большой разницы в производительности в типичных случаях.
Какой из них использовать, зависит от того, хотите ли вы рассматривать только непосредственных потомков или все узлы ниже этого в DOM, т.е. Выбрать подходящий метод, основываясь на желаемых результатах, а не на скорости метода. Если производительность действительно является проблемой, то поэкспериментируйте, чтобы найти лучшее решение и использовать его (или посмотрите некоторые критерии в других ответах здесь).
Этот тест jsPerf предполагает, что find() выполняется быстрее. Я создал более тщательный тест, и он по-прежнему выглядит так, как если find() превосходит children().
Обновление:. Согласно комментарию tvanfosson, я создал еще один тестовый пример с 16 уровнями вложенности. find() работает только медленнее при поиске всех возможных div, но find() по-прежнему превосходит children() при выборе первого уровня div.
children() начинает превосходить find(), когда существует более 100 уровней вложенности и около 4000 + div для поиска() для перемещения. Это рудиментарный тестовый пример, но я все же думаю, что find() быстрее, чем children(), в большинстве случаев.
Я прошел через код jQuery в инструментах разработчика Chrome и заметил, что children() внутренне вызывает вызовы sibling(), filter() и проходит через несколько регулярных выражений, чем find().
find() и children() выполняют разные потребности, но в тех случаях, когда find() и children() выдают тот же результат, я бы рекомендовал использовать find().
Вот ссылка, в которой вы можете выполнить тест производительности. find() на самом деле примерно в 2 раза быстрее, чем children().
Это не обязательно даст тот же результат: find() предоставит вам любого потомка node, тогда как children() будет получать только ваши ближайшие дети, которые соответствуют.
В какой-то момент find() был намного медленнее, так как он должен был искать каждого потомка node, который мог бы быть совпадением, а не только непосредственных детей. Однако это уже не так; find() намного быстрее из-за использования собственных методов браузера.
Ни один из других ответов не касался случая использования .children() или .find(">") для поиска только непосредственных дочерних элементов родительского элемента. Итак, я создал тест jsPerf, чтобы узнать, используя три разных способа различать детей.
Как это бывает, даже при использовании дополнительного селектора " > " .find() все еще намного быстрее, чем .children(); на моей системе, 10x так.
Итак, с моей точки зрения, похоже, нет никаких оснований использовать механизм фильтрации .children() вообще.
Оба метода
find()иchildren()используются для фильтрации дочернего элемента согласованных элементов, за исключением того, что первый перемещается на любой уровень вниз, последний перемещается на один уровень вниз.
Чтобы упростить:
find() - поиск через согласованные элементы: ребенок, внук, правнук... все уровни вниз.children() - поиск только по дочерним элементам согласованного элемента (только один уровень вниз).