JQuery: использование ближайшего селекторного вопроса

Я пытаюсь изучить некоторые jQuery и работать с некоторыми учебниками. Я очень рано участвую в этом процессе и участвую в переходе через DOM с .parent(), .parents() и .closest().JQuery: использование ближайшего селекторного вопроса

Я долго искал длинный текст, а затем недоумевал, почему я не смог выбрать определенный элемент (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. В журнале консоли ничего не отображается, но все же находит класс контейнера просто прекрасным. Просто подумал, что я должен знать, прежде чем двигаться дальше. Спасибо

источник

2014-01-09 Jamie Collingwood

ближе идет вверх по DOM дерева, в вашем примере, 'p' тег один из братьев и сестер ул TAGS родителей – Rooster

.closest() ищет всех родителей элемента (и даже самого элемента) для соответствия.

$('ul.listItem').closest('.para')

Это не работает, потому что .para не родитель из ul. Родители ul являются двумя .container divs (и, я думаю, тегии <html>).

Чтобы выбрать <p>, вы можете сделать:

$('ul.listItem').parent('div.container').prev('.para')

источник

2014-01-09 15:41:57

Ааа .. Понял! Я предположил, что он просто поднялся на страницу и выбрал любой тег p выше. Я предполагаю, что я предположил, что все выше него будет родителем, начиная с тега тела. Это имеет смысл. Благодаря! –

Добро пожаловать :-D –

JQuery: использование ближайшего селекторного вопроса

ответ

Смежные вопросы