jquery, селектор для класса внутри id

91

Ниже, как мне выбрать элементы, содержащие класс my_classв элементе с id = "my_id"?

Обратите внимание, что у элемента также может быть другой класс, который я не выбираю.

<div id = "my_id">
    <span class = "my_class hidden">hi</span>
    <span class = "my_class">hello</span>
</div>

пытался

$("#my_id [class*=my_class ]")
jquery пользователь984003
источник

Ответы:

151

Вы можете использовать селектор класса вместе с селектором потомков

$("#my_id .my_class")
Арун П. Джонни
источник
Могу ли я объединить это с: first (чтобы получить первый элемент этого класса внутри #my_id)?
jakob.j 07
1
@ jakob.j$("#my_id .my_class:first")
Арун Пи Джонни
Могу ли я использовать для класса то же самое, что и id, например $ (". My_class #my_id"), когда id определен внутри класса
dhS
48

Просто используйте простой селектор классов.

$('#my_id .my_class')

Неважно, есть ли у элемента другие классы. У него есть класс .my_class , и он находится где-то внутри #my_id , поэтому он будет соответствовать этому селектору.

Что касается производительности

Согласно документации по производительности селектора jQuery , быстрее использовать два селектора отдельно, например:

$('#my_id').find('.my_class')

Вот соответствующая часть документации:

Селекторы на основе идентификатора

// Fast:
$( "#container div.robotarm" );

// Super-fast:
$( "#container" ).find( "div.robotarm" );

Этот .find()подход работает быстрее, потому что первый выбор обрабатывается без прохождения механизма выбора Sizzle - выбор только по идентификатору обрабатывается с использованием document.getElementById(), что очень быстро, потому что оно встроено в браузер.

Выбор только по идентификатору или только по классу (среди прочего) вызывает функции, предоставляемые браузером, например, document.getElementById()которые довольно быстрые, тогда как использование дочернего селектора вызывает упомянутый механизм Sizzle, который, хотя и быстрый, но медленнее, чем предлагаемая альтернатива.

doppelgreener
источник
1

Я думаю, что вы просите выбрать только <span class = "my_class">hello</span>этот элемент, у вас есть это, если я правильно понимаю ваш вопрос, это ответ,

$("#my_id [class='my_class']").addClass('test');

DEMO

Тирумалай Муруган
источник
$("#my_id .my_class")- более короткий эквивалент; в этом случае вы ничего не получите от использования селектора атрибутов.
doppelgreener
Я надеюсь, что это тоже проделало ту же работу, что и ваш ответ, пока я отвечаю на вопрос, на который вы ответили, я не заметил, что с тех пор, как я дал ответ, я не удалил вопрос.
Тирумалай муруган
1

Также $( "#container" ).find( "div.robotarm" );
равно:$( "div.robotarm", "#container" )

Паша Олейник
источник