Какой самый эффективный селектор jQuery в следующей разметке?

Question

В настоящее время у меня есть какая-то сторонняя библиотека "магических виджетов" на стороне клиента, с которой мне приходится иметь дело ... :) Все, что мне нужно сделать, это добавить немного поведения к этим вещам с помощью jQuery для некоторые простые бизнес-правила. Много раз я обнаруживал, что выбираю кучу элементов одним и тем же способом. Так как «магические виджеты» уже очень тяжелы в JS, и я даже заметил это на своей быстрой машине, я пытался свести свой собственный JS к абсолютному минимуму. Итак, учитывая, что пользователь нажимает на один из следующих входов, каков наиболее эффективный способ выбрать все входы, включая выбранный, в следующей структуре с помощью jQuery?

<div>
    <label><input ... /></label>
    <label><input ... /></label>
    <label><input ... /></label>
</div>

Answer 1

Прежде всего, ваши входные данные не должны быть заключены в метки, но это другой аргумент.

Вероятно, самый быстрый способ:

$('input').click(function(){
   var siblings = $(this).closest('div').find('input');
});

Тем не менее, он также выберет ваш ввод по нажатию. Если это проблема, попробуйте:

$('input').click(function(){
   var siblings = $(this).closest('div').find('input').not($(this));
});

Если вы использовали правильную разметку, чтобы теги меток предшествовали каждому элементу ввода, то ваш HTML-код мог бы выглядеть как

<div>
    <label for="input1" /><input id="input1" ... />
    <label for="input2" /><input ... />
    <label for="input3" /><input ... />
</div>

Тогда ваш код jQuery станет намного проще:

$('input').click(function(){
   var siblings = $(this).siblings('input');
});

Answer 2

Похоже, что использование имени класса лучше, чем использование имен тегов без какого-либо родителя. Вот тест для него.

Возможно, более сложная структура html даст другие результаты.

Answer 3

это зависит. если разметка состоит только из вашего фрагмента, то:

$('input');

Все современные брокеры имеют кеш для тегов.

Если вы ищете входы в пределах div, добавьте id к div:

<div id="input_fields">
    <label><input ... /></label>
    <label><input ... /></label>
    <label><input ... /></label>
</div>

и используйте этот селектор:

$('#iput_fields > label > input');

Значение id важно, поскольку это самый быстрый запрос, который может выполнить браузер.

Answer 4

Ну, при условии, что нет элементов в этой разметке имеют уникальные идентификаторы или имена классов, наиболее эффективный селектор, который вы можете использовать, - это комбинация имен тегов и селектора > или first-child:

$("div > label > input");

Answer 5

$("div>label>input") Полагаю.Хотя вы можете дать каждому входу общий класс и сделать $("input.class").