Селекторы JQuery: как выбрать элемент с определенным классом * и * id

Я пытаюсь выбрать HTML-элемент на моей странице, который имеет определенный класс и идентификатор. Вот тег:

<div class="statusLight" id="green"></div>

я попробовал это без успеха:

$statusLight = $('.statusLight#green');

Я знаю, что я мог бы просто сказать 

$statusLight = $('#green');

но я пытался найти способ выбрать его на основе его класса. Любая помощь будет оценена.

12
css-selectors jquery jquery-selectors

7 ответов

и #green.statusLight и .statusLight#green являются допустимыми селекторами и должны выбрать элемент, который вы ищете. Первый будет быстрее.

вы используете $(...) после загрузки документа, т. е. из $(document).ready(function() { ... }) или разместив свой скрипт после вашего элемента?

18

Я не совсем уверен, почему вы хотите это сделать.

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

этот сценарий будет иметь смысл, только если вы объединяете селектор классов с селектором элементов, например

$("div.statuslight")

но в вашем примере нет смысла, так как у вас все равно есть ID!

11

Почему вам также нужно выбрать класс? Идентификаторы должны быть уникальными, поэтому добавление класса к этому не купит вам ничего. Если вы просто используете ID, это более эффективно, потому что тогда jQuery может просто использовать собственный getElementByID, который всегда самый быстрый. Держите ваши запросы простыми, когда можете.

3

$(".class#id") или $("#id.class") будет работать.

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

дело в том, что я работаю над проектом, где у нас есть контейнерные DIVs, которые создают "виджеты" на странице... эти "виджеты" дан числовой идентификатор из базы данных, поэтому мы заканчиваем с <div id="12345" class="widget">

кто-то еще закодировал двусмысленный идентификатор задолго до того, как я здесь работал... но оно остается. Когда я пишу JQuery, я бы предпочел не делать больше запутанного беспорядка кода... так вместо $("#12345") Я предпочел бы $(".widget#12345") так что кто-то не должен тратить полчаса, пытаясь выяснить, что идентификатор 12345 в этом сценарии предназначен для виджета.

пока $("#12345") и $(".widget#12345") выберите то же самое... это делает код гораздо более читаемым для моих коллег, и это более важно, чем доля секунды в улучшении скорости для javascript.

2

еще одна причина, по которой вы, вероятно, сделаете это, если у вас есть кэшированный общий код, ищущий определенный идентификатор, но вы хотите активировать его только тогда, когда вам назначен определенный стиль. Особенно при рендеринге scafolded MVC элементов, где идентификаторы могут быть в определенных представлениях, но вы не хотите, чтобы были приняты меры, скажем... "скрытые" поля идентификатора, но в других представлениях это могут быть значения поиска в комбо и иметь назначенный addin Select2...

0

самый простой способ сделать это:

$('.statusLight[id=green]');

поскольку id является атрибутом, вы можете использовать селектор атрибутов

0

просто последующие FYI:

Если вы хотите ссылаться на идентификатор и подкласс (например, зеленый statusLight, но не синий):

<div id="green">
    <div class="statusLight"></div>
</div>

<div id="blue">
    <div class="statusLight"></div>
</div>

тогда вам нужно добавить пробел $("#green .statusLight")

0