Я пытаюсь изучить некоторые jQuery и работать с некоторыми учебниками. Я очень рано .parent()
в этом процессе и .parent()
в переходе через DOM с помощью .parent()
, .parents()
и .closest()
.
Я урчание долго, а затем стал недоумевали, почему я не мог выбрать определенный элемент (p
тег с классом) и добавить класс к нему.
Имейте в виду, что это просто упражнения. Я бы не выбрал что-то таким образом, но я хочу видеть, что это можно сделать.
<div class="container">
<h1>Hello World</h1>
<h2>This is a tutorial</h2>
<p class="para">This is a tutorial for jquery and jquery UI</p>
<div class="container">
<ul class="listItem container">
<li>Hello 1</li>
<li>Hello 2</li>
<li>
<ul class="nest">
<li>Nest 1</li>
<li>Nest 2</li>
</ul>
</li>
</ul></div>
</div>
JQuery
//$('ul.listItem').find('li').first().addClass('listItem2');
//$('li').parent().removeClass('listItem');
$('ul.nest').children('li:first').addClass('listItem');
$('ul.listItem').closest('.container').removeClass('container');
$('ul.listItem').children('li:nth-child(2)').addClass('listItem3');
$('ul.listItem').closest('.para').addClass('listItem2');
//console.log($('ul').parents('.container'));
console.log($('ul').closest('.container'));
console.log($('ul.listItem').closest('.para'));
Мой вопрос в том, почему он не будет выбирать тег p
в этом примере и добавить в него класс listItem2
? Он обнаруживает, что контейнерный тег просто отлично, но не тег p
или даже класс para
. В журнале консоли ничего не отображается, но все же находит класс контейнера просто прекрасным. Просто подумал, что я должен знать, прежде чем двигаться дальше. благодаря
.closest()
ищет всех родителей элемента (и даже самого элемента) для соответствия.
$('ul.listItem').closest('.para')
Это не работает, потому что .para
не является родителем ul
. ul
- это два .container
divs (и я думаю теги <body>
и <html>
).
Чтобы выбрать <p>
, вы можете:
$('ul.listItem').parent('div.container').prev('.para')
p
является одним из братьев и сестер родительского тега ul