Як я можу вибрати предмет із класом у межах DIV?

142

У мене є такий HTML:

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

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

— Ідан Шехтер
джерело

285

Спробуйте:

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

JS Fiddle демо .

Або:

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

JS Fiddle демо .

Або:

$('#mydiv .myclass');

JS Fiddle демо .

Список літератури:

Добре вивчити find()документацію:

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

— Девід каже повернути Моніку
джерело

2

другий два не працюватимуть, але знайти Ок. Другі два виберуть кожен клас = myclass і виберуть кожен id = mydiv) я думаю.

— czupe

2

@czupe: ні, поки підхід до вибору контексту записується по-різному, реалізує jQuery, внутрішньо той самий $('#mydiv').find('.myclass');підхід, який використовується у першому фрагменті коду. Між іншим: "... вибрати кожного id=mydiv"? Там повинні тільки коли - або бути один використання заданого idна сторінці ( id повинен бути унікальним в межах документа ).

— Девід говорить про відновлення Моніки

@DavidThomas Ну я просто спробував $ ('# mydiv .myclass'); і в кінцевому підсумку було вибрано всі діви, які мають клас myclass, а не просто діви в mydiv.

— користувач3281466

@ user3281466: справді? Це здається малоймовірним, чи можете ви відтворити свою проблему ?

— Девід каже повернути Моніку

як вам перевірити що-небудь у

— діві,

20

Спробуйте це

$("#mydiv div.myclass")

— ShankarSangoli
джерело

Або якщо вам байдуже, чи це div(або якщо він завжди буде а div), ви можете спростити його до $ ("# mydiv .myclass").

— Майкл Міор

@Michael - Так, ми можемо просто сказати .mycalss, але якщо ми знаємо його div, div.myclass зробить пошук швидшим.

— ShankarSangoli

@Shankar, швидше за все, це не зробить це швидше, а повільніше. припускаючи, що jquery використовує sizzle, а не рідний, document.queryselectorallвін, ймовірно, шукатиме так само, і у вашому випадку здійснить додаткову перевірку. Можливо, що вродні реалізації роблять те саме.

— Давін

Деякі швидкі тести, які я провів, свідчать про те, що це залежить від браузера. Він відображався незначно швидше в Chrome і незначно повільніше у FF. У будь-якому випадку, якщо ви не використовуєте цей селектор багато разів або над великою кількістю елементів, різниця, ймовірно, незначна. Дивіться тут на мій сирий (і, можливо, хибний) тест.

— Майкл Міор

@Michael - Якщо ми вкажемо ім'я тега разом із назвою класу, воно спочатку використовуватиме getElementsByTagName, а потім шукатиме ім’я класу, яке визначається швидше, і все ж використовує нативний метод для сортування першого рівня. Завжди це мізерно, якщо не так багато елементів для вибору.

— ShankarSangoli

11

Ви зробите це так само, як застосуєте селектор css. Для миттєвості ви можете зробити

$("#mydiv > .myclass")

або

$("#mydiv .myclass")

Останній відповідає всім міккласам всередині myDiv, включаючи мікклас всередині myclass.

— Леандро Галлуппі
джерело

6

Якщо ви хочете вибрати кожен елемент, який має атрибут класу "myclass"

$('#mydiv .myclass');

Якщо ви хочете вибрати лише елементи div, які мають атрибут класу "myclass"

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

дізнатися більше про JQuery селектори відносяться ці статті

— e11438
джерело

1

спробуйте це замість цього $(".video-divs.focused"). Це працює, якщо ви шукаєте відеоролики, які зосереджені.

— користувач3749775
джерело