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

145

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

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

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

— Идан Шехтер
источник

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
источник