JQuery Селекторы: как выбрать элемент с определенным классом * и * 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

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

Answer 4

Еще одна причина, по которой вы, вероятно, сделаете это, - это иметь общий кешированный код, ищущий определенный идентификатор, но вы хотите активировать его только при назначении определенного стиля. Особенно, когда вы выполняете рендеринг scololded MVC-элементов, где идентификаторы могут находиться в определенных представлениях, но вы не хотите принимать действия, скажем ... «скрытые» поля id, но в других представлениях это могут быть значения поиска в комбо и иметь Аддин выбор2 назначен ...

Answer 5

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

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

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

Answer 6

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

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

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

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

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

Answer 7

Просто прослеживание FYI:

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

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

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

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