Что лучше использовать селекторы классов или селекторы пользовательских атрибутов с jquery?

Question

Я прочитал, что лучше выбрать "id", чем "class" с jquery. Однако, скажем, у меня есть несколько div на странице, которые мне нужно выбрать с помощью jquery и выполнить те же манипуляции Я не могу выбрать с атрибутом "id", потому что он не будет уникальным. например:

<div id="selectMeOnClick">
    ...
</div>
<div id="selectMeOnClick">
    ...
</div>
... many more divs ...

что оставляет меня (я думаю?) С 2 альтернативами:

Использовать селекторы классов

<div class="selectMeOnClick">
    ...
</div>

Использовать пользовательские селекторы атрибутов

<div data-select="selectMeOnClick">
    ...
</div>

Мой вопрос: действительно ли это 2 альтернативы? И какое решение наиболее эффективно?

Спасибо

Answer 1

Я бы использовал селекторы классов.Использование пользовательских селекторов атрибутов:

1. Неверный HTML .HTML позволяет только определенные именованные атрибуты присутствовать на определенных типах элементов.
2. Медленнее .В то время как jQuery может использовать native .getElementsByClassName в вашем первом фрагменте, он не может использовать второй.Это может привести к замедлению работы современных браузеров.

Answer 2

Да, лучше использовать "id", чем "class" с jquery. Но не только с jquery. Это общий подход.

В вашей ситуации вы должны предоставить больше информации. Если вы хотите выбрать несколько div с одним и тем же классом - возможно, все они являются потомками другого div, например И вы можете получить их как ребенка от некоторого div, который вы можете получить по id.

Вы должны создать такую ​​структуру DOM, чтобы вы могли получить доступ к элементам по id или логически по некоторым свойствам.

Кроме того, если вы хотите изменить какой-либо атрибут css в точном классе css, не самая плохая идея получить div по классу.

Также выбор пользовательских атрибутов не очень хороший способ. Это недействительно.

Answer 3

Я лично использую оба в зависимости от случая. Если, например, строка в таблице представляет некоторые данные, которые я хочу разместить, но не обязательно отображать, я использую пользовательские атрибуты. Иногда так приятно писать такие вещи:

$("input[action=do-something]").click(function() { ... });

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

Answer 4

Для простого выбора, подобного этому, производительность не будет проблемой. но если ваш div's находится внутри контейнера с идентификатором, например

<div id="Main">
    <div class="selectMeOnClick">
        ...
    </div>
    <div class="selectMeOnClick">
        ...
    </div>
</div>

Обновление : согласно gdoron комментарий

Тогда самый быстрый селектор будет $('#Main selectMeonClick')

Answer 5

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

Мне не нравится использовать пользовательские атрибуты, потому что они недопустимы и делают DOM довольно грязным.Я предпочитаю использовать .data() для хранения данных, относящихся к выбранному элементу.