В jQuery, какой самый быстрый способ выбрать группу элементов?

Question

Мне нужно добавить событие onClick примерно к 10-20 элементам на странице.

Какой самый быстрый способ ссылки на эти элементы?

Будет ли использоваться: 1) ссылка на класс 2) ссылка на идентификатор

Или более развернутая ссылка, например: p -> div -> li?

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

Answer 1

Этого действительно недостаточно для беспокойства. Если на вашей странице не происходит много вещей, я бы сказал, используйте jQuery и селектор классов для удобства сопровождения и восстановления, а затем перейдите к более сложному коду. :)

Если вас это беспокоит, проверьте это сами, слегка запустив его в своем скрипте.

Добавлено: Чтобы прямо ответить на ваш вопрос о скорости селектора: #id >> tag.class> .class. Обратите внимание, что для более чем 20000 элементов измеренное время отличается не более чем на ~ 700 мс между поиском по идентификатору и поиском по чисто классам. Вот почему я предлагаю вам не слишком беспокоиться ...:)

Answer 2

Поскольку вы добавляете события onClick, посмотрите делегирование событий. Это изменило мою жизнь. : -)

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

Answer 3

Вам нужно будет найти шаблон в ваших элементах, а также в других элементах на вашей странице.

У них один класс? Есть ли на странице другие элементы, которые вы не хотите выбирать, но у которых есть тот же класс? Та же история для выбора на основе html-тегов.

И вы должны принять решение, основываясь на результатах вашего «анализа» элементов.

Answer 4

Зависит от ситуации. 10-20 элементов, которые хорошо разделены по типу или иерархии, так что вы можете ссылаться только на эти элементы, а не на любые другие. Я бы использовал иерархический или атрибутный селектор. 10-20 элементов, которые перемежаются с другими элементами того же типа, к которым не должен применяться селектор, тогда я бы назначил и использовал класс. Последнее, вероятно, наиболее гибкое, если вы думаете, что компоновка может измениться и сломать другие селекторы.

$('div#interface > a').click( ... )

$('input[type=button]').click( ... )

$('span.clickable').click( ... )

Answer 5

Если вы окружаете содержимое div и делаете (div -> li). Тогда вам не нужно было бы писать много тегов для каждого элемента, но определенно класс с идентификатором

Answer 6

Как вы планировали выбрать 10-20 различных элементов, используя идентификатор?

Ссылка на класс - это путь, я бы сказал.