Я пытаюсь выбрать элемент HTML на своей странице с определенным классом и идентификатором. Здесь тег:
<div class="statusLight" id="green"></div>
Я пробовал это без везения:
$statusLight = $('.statusLight#green');
Я знаю, что могу просто сказать
$statusLight = $('#green');
Но я пытался найти способ выбрать его на основе его класса. Любая помощь будет оценена.
Оба #green.statusLight и .statusLight#green являются допустимыми селекторами и должны выбирать элемент, который вы ищете. Сначала будет быстрее.
Используете ли вы $(...) после загрузки документа, т.е. от $(document).ready(function() { ... }) или путем размещения script после вашего элемента?
Я не совсем уверен, почему вы хотели бы это сделать.
Идентификатор должен быть уникальным, поэтому, когда вы его выбираете, нет никакой необходимости в дальнейшей специализации. Если нет, вам нужно изменить свой HTML, чтобы сделать это.
Этот сценарий имеет смысл только в том случае, если вы комбинировали селектор классов с селектором элементов, например
$("div.statuslight")
Но в вашем примере просто нет смысла, так как у вас есть ID!
Зачем вам нужно выбирать и в классе? Идентификаторы должны быть уникальными, поэтому добавление класса к нему не принесет вам ничего. Если вы просто используете ID, он более эффективен, потому что тогда jQuery может просто использовать собственный getElementByID, который всегда самый быстрый. Сохраняйте ваши запросы простыми, когда сможете.
$(".class#id") или $("#id.class") будут работать.
Все комментируют в этом вопросе, что нет оснований для этого... не может быть причины "лучшей практики" сделать это с хорошо продуманной программой, но в реальном мире большинство из нас работает в компаниях которые не очень хорошо организованы, и если вы работаете с большой 10000+ файловой программой, вы можете не захотеть заменить не описательный идентификатор, и добавив класс в селектор, вы можете помочь своим коллегам-кодорам понять, где Идентификатор появился.
Дело в том, что я работаю над проектом, где у нас есть контейнеры DIV, которые создают "виджеты" на странице... этим "виджетам" присваивается числовой идентификатор из базы данных, поэтому мы заканчиваем с <div id="12345" class="widget">
Кто-то еще долго кодировал неоднозначный идентификатор, прежде чем я работал здесь... но он остается. Когда я пишу JQuery, я бы предпочел не делать больше путаного беспорядка кода... поэтому вместо $("#12345") я мог бы предпочесть $(".widget#12345"), чтобы кому-то не пришлось тратить полчаса, пытаясь понять что идентификатор 12345 в этом сценарии для виджета.
Итак, пока $("#12345") и $(".widget#12345") выбирают одно и то же... это делает код более читаемым для моих сотрудников, и это важнее, чем часть секунды в улучшении скорости для javascript.
Еще одна причина, по которой вы, вероятно, сделаете это, - это если вы используете кешированный общий код для поиска определенного идентификатора, но вы хотите активировать его только при назначении определенного стиля. Особенно, когда вы выполняете рендеринг scololded MVC-элементов, где идентификаторы могут находиться в определенных представлениях, но вы не хотите принимать действия, скажем... "скрытые" поля id, но в других представлениях это могут быть значения поиска в комбо и иметь a Select2 addin назначен...
Самый простой способ:
$('.statusLight[id=green]');
Поскольку идентификатор является атрибутом, вы можете использовать селектор атрибутов
Просто последующий FYI:
Если вы хотите ссылаться на id и подкласс (например, зеленый статусLight, но не синий):
<div id="green">
<div class="statusLight"></div>
</div>
<div id="blue">
<div class="statusLight"></div>
</div>
Затем вам нужно добавить пробел $("#green .statusLight")