Эквивалентные селекторы jQuery

Question

Следующие слова в точности эквивалентны? Какой тип вы используете и почему?

$('#form1 .edit-field :input')
$('#form1 .edit-field').find(':input')
$('.edit-field :input', '#form1')
$(':input', '#form1 .edit-field')

Answer 1

Я бы использовал # 2 или # 4:

$('#form1 .edit-field').find(':input')
$(':input', '#form1 .edit-field')

Оба вышеперечисленных по сути одинаковы. За занавесом при указании контекста все равно происходит то, что происходит:

jQuery( context ).find( selector );

Причина, по которой я бы избегал # 1 и # 3, заключается в том, что они оба значительно медленнее, чем # 2 / # 4.

---

РЕДАКТИРОВАТЬ: Только что сделал быстрый тест: 1000 входных элементов с помощью ВАШИХ селекторов:

$('#form1 .edit-field :input')            // 55ms
$('#form1 .edit-field').find(':input')    // 21ms
$('.edit-field :input', '#form1')         // 47ms
$(':input', '#form1 .edit-field')         // 18ms

Answer 2

Первые два эквивалентны при сравнении выбора элемента. Тем не менее, вторая форма, когда она используется в цепочке команд с соответствующим вызовом end(), может использоваться для выбора дополнительных дочерних элементов в «# form1 .edit-field», т.е.

$('#form1 .edit-field').find(':input')
   ...
.end().find(':hidden')...
.end()...

Я не уверен насчет вторых двух форм, на самом деле, я считаю, что они не действительны. Поправьте меня, если я ошибаюсь, но, исходя из документов, правильный синтаксис будет выглядеть так:

$('.edit-field :input', $('#form1'))
$(':input', $('#form1 .edit-field'))

В любом случае, ИМХО, это менее краткие способы сказать то же самое.

Таким образом, в общем, я бы придерживался первой формы, если только вы не воспользуетесь преимуществом второй для прохождения дополнительных детей, как объяснено выше.

Answer 3

Я бы использовал разные формы в зависимости от того, что у меня уже есть и с какими элементами мне также нужно работать. Например, если мне нужно работать с другими полями в той же форме, я сохраню ссылку на $ ('# form1'), чтобы сохранить ее поиск несколько раз.

Answer 4

Чем больше я кодирую в jQuery, тем меньше я использую селекторов и тем больше я пересекаю. Я бы сделал:

$('#form1').find('.edit-field').find(':input')

Это длиннее, но лучше передает процесс выбора с чуть большим значением для каждого шага. Обход более удобен для создания цепочки и делает end () полезным.