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

0

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

  • 2
    самый близкий идет вверх по дереву DOM, в вашем примере, тег p является одним из братьев и сестер родительского тега ul
Теги:
closest

1 ответ

3
Лучший ответ

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

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

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

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

$('ul.listItem').parent('div.container').prev('.para')
  • 0
    Ааа .. Понял! Я предположил, что он просто поднялся на страницу и выбрал любой тег p выше. Я предполагаю, что предположил, что все, что находится выше, будет родительским тегом, начиная с тега body. Это имеет смысл, хотя. Спасибо!
  • 0
    Добро пожаловать

Ещё вопросы

Сообщество Overcoder
Наверх
Меню