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

Question

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

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

Я попробовал это без удачи:

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

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

$statusLight = $('#green');

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

Answer 1

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

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

Answer 2

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

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

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

$("div.statuslight")

Но в вашем примере это просто бессмысленно, так как у вас все равно есть идентификатор!

Answer 3

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

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

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

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

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

Answer 4

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

Answer 5

Просто продолжение К вашему сведению:

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

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

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

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

Answer 6

Самый простой способ:

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

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

Answer 7

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