Как я могу выбрать элемент с классом в DIV?

145

У меня есть следующий HTML:

<div id="mydiv">
  <div class="myclass"></div>
</div>

Я хочу иметь возможность использовать селектор, который выбирает внутреннюю часть div, но специфичен для mydivконтейнера. Как я могу добиться этого с помощью jQuery?

javascript jquery html class jquery-selectors Идан Шехтер
источник

Ответы:

290

Пытаться:

$('#mydiv').find('.myclass');

Демо JS Fiddle .

Или:

$('.myclass','#mydiv');

Демо JS Fiddle .

Или:

$('#mydiv .myclass');

Демо JS Fiddle .

Ссылки:

Полезно узнать из find()документации:

Методы .find () и .children () похожи, за исключением того, что последний перемещается только на один уровень вниз по дереву DOM.

Дэвид просит восстановить Монику
источник
2
вторые два не будут работать, но найти в порядке. Вторые два будут выбирать каждый class = myclass и выбирать каждый id = mydiv), я думаю.
czupe
2
@czupe: нет, хотя подход с использованием контекстного селектора написан иначе, jQuery внутренне реализует тот же $('#mydiv').find('.myclass');подход, что и в первом фрагменте кода. Между прочим: «... выбрать каждый id=mydiv»? Там должны только когда - либо быть один использование заданного idна странице ( id должен быть уникальным в пределах документа ).
Дэвид просит восстановить Монику
@DavidThomas Ну, я только что попробовал $ ('# mydiv .myclass'); и в результате были выбраны все div, которые имеют класс myclass, а не только div внутри mydiv.
user3281466
@ user3281466: правда? Это кажется маловероятным, сможете ли вы воспроизвести свою проблему ?
Дэвид просит восстановить Монику
как проверить что-нибудь в div, а затем вставить это: not ()
SuperUberDuper
21

Попробуй это

$("#mydiv div.myclass")
ШанкарСанголи
источник
Или, если вам все равно, будет ли это div(или всегда будет div), вы можете упростить до $ ("# mydiv .myclass").
Майкл Миор
@Michael - Да, мы можем просто сказать .mycalss, но если мы знаем, что это div, div.myclass ускорит поиск.
ShankarSangoli
@Shankar, скорее всего, быстрее не будет, скорее, медленнее. предполагая, что jquery использует sizzle, а не собственный, document.queryselectorallон, вероятно, будет искать таким же образом, а в вашем случае выполнить дополнительную проверку. Возможно, что нативные реализации делают то же самое.
Дэвин
Некоторые быстрые тесты, которые я провел, показывают, что это зависит от браузера. Он оказался немного быстрее в Chrome и немного медленнее в FF. В любом случае, если вы не запускаете этот селектор много раз или для большого количества элементов, разница, вероятно, незначительна. Смотрите здесь мой грубый (и, возможно, ошибочный) тест.
Майкл Миор
@Michael - если мы укажем тэг вместе с именем класса, он сначала будет использовать getElementsByTagName, а затем искать имя класса, которое определенно быстрее и по-прежнему использует собственный метод для сортировки первого уровня. В любом случае это незначительно, если нужно выбрать не так много элементов.
ShankarSangoli
13

Вы сделаете это так же, как применили бы селектор CSS. Например, вы можете сделать

$("#mydiv > .myclass")

или

$("#mydiv .myclass")

Последний будет соответствовать каждому myclass внутри myDiv, включая myclass внутри myclass.

Леандро Галлуппи
источник
6

Если вы хотите выбрать каждый элемент с атрибутом класса «myclass», используйте

$('#mydiv .myclass');

Если вы хотите выбрать только элементы div, у которых есть атрибут класса "myclass", используйте

$("div#mydiv div.myclass");

узнать больше о селекторах jquery см. эти статьи

e11438
источник
1

попробуйте это вместо этого $(".video-divs.focused"). Это работает, если вы ищете сфокусированные видео-блоки.

user3749775
источник