Question

我正在尝试学习一些jQuery并学习一些教程。我很早就开始使用.parent()，.parents()和.closest()来学习DOM。

我唠叨了很长时间然后变得困惑，为什么我无法选择某个元素（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类。在控制台日志中它什么也没有显示，但是却发现容器类很好。我想在继续之前我应该知道。感谢

Answer 1

.closest()搜索元素的所有父元素（甚至是元素本身）以进行匹配。

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

这不起作用，因为.para不是ul的父。 ul的父级是两个.container div（我猜<body>和<html>个标签。）

要选择<p>，您可以执行以下操作：

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

Jquery：使用最近选择器问题

1 个答案: