Как быстро работает find в jquery?

Question

[Рамиль]

Просто хотел бы узнать как правилнее писать. Например есть html:

<div class="item">
 <div class="image">Hello World!</div>
</div>

Как будет более производительнее ?

$('.item').click(function(){
  $(this).find('.image').text('ok');
})

Или:

$('.item').click(function(){
  $('.image').text('ok');
})

Answer 1

[Евгений Петров]

Гарантированно производительнее будет так:

$(document).on('click', '.item', (function (e) {
	$('.image', this).text('ok');
});

Вопрос задаёте хороший, но ограничиваете себя только траверсом элементов, в то время как предпочтительней использовать фазу всплытия события без какого-либо предварительного поиска. Ах, и да — при динамической генерации контента такой вариант безотказен.

Можно обратить внимание на синтаксис поиска — различные варианты вызова jQuery описаны в документации.

Comments

[teotlu]

А вы всегда и на все элементы навешиваете события через document?

[Евгений Петров]

teotlu: Не всегда, иногда нужно не пропускать события дольше целевого узла. Но в большинстве случаев именно так.

[teotlu]

Евгений Петров: ну да, это-то ясно. Спасибо, очень полезная информация :)

Answer 2

[IceJOKER]

В документации об этом написано, читайте.
Быстрота find() заключается в том, что поиск происходит отталкиваясь от текущего элемента, а при просто $('.image') - поиск проходит по всем элементам.
Но особой разницы вряд ли почувствуете на небольших(средних) страницах

https://learn.jquery.com/performance/optimize-sele...