Я просто изучаю jQuery и немного запутался в этом:
Скажем, мне нужно предоставить сценарий jQuery, который добавит имя класса 'ourClass' к <div>
. Я бы использовал следующий код:
$("div").addClass('ourClass');
Правильно ли это? После того, как я добавлю имя класса в этот конкретный <div>
будут ли конфликты позже, если я хочу добавить другое имя класса в другой конкретный <div>
?
Базовый вопрос помогает оценить.
Селектор JQuery $("div")
выберет ВСЕ элементы div
на странице. Наверное, не то, что ты хочешь.
Вместо этого посмотрите на родительские элементы и попытайтесь определить селектор, который будет нацелен на соответствующий элемент.
Например...
<header>
<div>abc</div>
<div>def</div>
<div>ghi</div>
</header>
<main>
<div>jkl</div>
<div>mno</div>
<div>pqr</div>
<ul>
<li>
<div>stu</div>
</li>
</ul>
</main>
Селекторы:
Селектор $("header div")
выберет первые три $("header div")
. Если вам нужно выбрать только один из них, вы можете использовать $("header div").first()
, $("header div").last()
или $("header div").eq(1)
, (eq()
будет выбирать по индексу, где индекс первого элемента равен 0
).
$("main div")
выберет последние четыре (любой элемент div
, являющийся дочерним элементом main
, включая "stu"). Это также эквивалентно $("main").find("div")
.
$("main > div")
выберет любой div
который является прямым ребенком main
("jkl", "mno" и "pqr", но не "stu"). Это также эквивалентно $("main").children("div")
.
$("main li div")
выберет "stu".
Обычно лучше всего просто дать вашим элементам имя класса или идентификатор, если вам нужно настроить таргетинг на них с помощью JQuery, но всегда можно проявлять творческий подход к вашим селекторам, если у вас нет выбора.
Как указывает король Кинг, вышеупомянутое может найти каждый div на странице и добавить к нему класс ourClass. Селекторная часть jQuery работает так же, как CSS, поэтому, если бы у вас было правило в вашем CSS, которое было div (background-color: blue;), оно применило бы синий фон к каждому div на странице. Предоставляя более конкретную информацию в своем селекторе, вы можете ограничить или настроить конкретные элементы на странице.
И точно так же, как ваша стандартная надпись может иметь несколько классов для одного элемента, вы можете добавить несколько классов с помощью jQuery.
используйте .filter()
в соответствии с вашими комментариями:
$('div').filter(function(){
return $(this).css('height') === '34px'
}).addClass('ourClass');
Вышеприведенный фрагмент кода добавляет ourClass
css ourClass
класса к div, который имеет высоту 34px
.
Любые элементы могут иметь любое количество классов. Но такой же идентификатор не должен быть в документе.
div