Селектор класса JQuery против селектора id

У меня есть 7 различных кнопок, которые выполняют одну и ту же функцию javascript при нажатии. должен ли я использовать селектор классов или селектор идентификаторов.

$("input.printing").on("click", function(event) {
     printPdf(event);
});

или

   $("#package1Pdf").click(function(event) {
         printPdf(event);
   });
$("#package2Pdf").click(function(event) {
         printPdf(event);
   });
$("#package3Pdf").click(function(event) {
         printPdf(event);
   });
$("#package4Pdf").click(function(event) {
         printPdf(event);
   });

Каковы преимущества и недостатки каждого? Что более предпочтительно.

Ответ 1

Вы можете использовать идентификационный фильтр без нескольких селекторов:

$('[id^="package"]').click(printPdf);

Вышеуказанное выберет все id, начиная с "package". Это означает, что разница в основном семантическая. Вы должны выбрать то, что наиболее важно для вашего приложения и как оно было разработано.

Обратитесь к странице странице селекторов атрибутов jQuery, чтобы узнать о гибкости выбора jQuery. Сохранение закладки на этой странице не позволит вам снова написать код, как ваш второй пример.

Что лучше?

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

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

Ответ 2

Очевидно, что ваш первый код с использованием класса намного чище, опрятен и лучше.

ID-селектор является самым быстрым, что верно... но в это время и возраст это не имеет большого значения.

Поэтому не стоит так беспокоиться о производительности (если это не проблема) и просто используйте тот, который чист и поддерживается.

oh btw, вам даже не нужна эта анонимная функция. См. Ниже,

$("input.printing").on("click", printPdf);

Ответ 3

поскольку все мы знаем, что селектор id быстрее и лучше.. но в вашем случае.. поскольку вы выбираете каждый идентификатор 8 раз., которые сравниваются с классом seletor медленнее, как вы можете видеть здесь

Селектор класса

в вашем случае лучше, быстрее и читабельнее...

Примечание:, если вам нужно добавить еще 20 кнопок в ближайшем будущем (100 будет слишком много)..... и вы решите пойти с селектором id... phewwww!!! это похоже, еще 20 обработчиков событий......;);)

Ответ 4

Как указывалось большинством, используемый вами селектор может влиять на производительность, но он часто ничтожно мал и, в большей степени, является вопросом стиля и удобочитаемости. В нижней строке jQuery будет создан уникальный обработчик для каждого выбранного элемента, индивидуально по id или с помощью метода множественного выбора, такого как селектор классов или атрибутов. Лично мне нравится ваш первый пример, так как он будет охватывать будущие дополнения к вашему представлению, не забудьте запомнить другого обработчика.

Ответ 5

Выбор только по идентификатору быстрее, чем выбор по классу в целом, поскольку jQuery под капотом использует getElementById, который быстрее в большинстве браузеров. Более подробную информацию см. В этой статье, поскольку она показывает множество других способов повышения производительности, связанных с JQuery. Однако, пожалуйста, помните, что производительность селектора - это не единственное, что вас беспокоит. Прикрепление ко многим ненужным событиям может также создать проблему с производительностью. Чтобы смягчить эту проблему, вы можете использовать делегат, обратитесь к этой документации jQuery для получения дополнительной информации о делегате.