Question

我在选择无序列表中的特定li元素时遇到问题。虽然这不是一个主要问题，我可以找到一种方法，但我真的很想知道为什么它不起作用。

我的HTML：

<div id="myList">
    <ul>
        <li>something 1</li>
        <li>something 2</li>
        <li>something 3</li>
        <li>something 4
            <ul>
                <li>sub something 1</li>
                <li>sub something 2</li>
                <li>sub something 3</li>
            </ul>
        </li>
    </ul>
</div>

我的问题是：

$('#myList ul:first li:first').addClass('cool')

这会将类添加到“something 1”li标签中。一切都很好。但是：

$('#myList ul:first li:last').addClass('cool')

不是将类添加到“something 4”li标签，而是将其添加到“sub something 3”li标签。

为什么？

Answer 1

您正在树下选择所有li-Tags。

您可能想尝试一下：

$('#myList ul:first>li:last').addClass('cool')

这样，您只能选择上一个节点的直接子节点。

Answer 2

li:last从左到右处理。首先，选择li后代的所有ul元素。由于您使用的是descendant selector而不是子选择器，因此包含所有“sub”li元素。 :last然后选择最后一个显示在文档中，即sub something 3。

您应该使用child selector代替：

$('#myList ul:first > li:last').addClass('cool')

jQuery选择器不合逻辑

2 个答案: