以第一个和最后一个“li”为目标在每个“ul”中

Question

我想使用 jQuery 定位“ul”的第一个和最后一个“li”，并相应地向它们添加“first”和“last”类。

我知道使用 jQuery 如果它只是一个简单的“ul”，那么这很容易，但如果“ul”在父“ul”中嵌套了多个“ul”，我会很难找到正确的语法。

下面是 html 标记的示例：

<ul>
    <li><a href="#">Top Level Item</a>
        <ul>
            <li><a href="#">First Sub-Item</a></li>
            <li><a href="#">Last Sub-Item</a>
                <ul>
                    <li><a href="#">First Sub-Sub-Item</a>
                    <li><a href="#">Last Sub-Sub-Item</a></li>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

我需要定位每个子 ul 的所有第一个和最后一个项目，并对每个项目应用一个类。

这是我一直在使用的，但它显然不起作用，因为它将类名仅应用于第一个“li”和最后一个“li”。

jQuery('.topmenu ul li ul li').first().addClass('first');
jQuery('.topmenu ul li ul li').last().addClass('last');

有什么建议吗？

Answer 1

我假设您显示的所有内容都位于“topmenu”类的内容内。如果它是唯一的，我建议将其更改为 ID，并将一个类应用于“第一个 ul”，这样就不必在算法上避免它。

$('.topmenu').find('ul ul li:first-child').addClass('first');
$('.topmenu').find('ul ul li:last-child').addClass('last');

http://jsfiddle.net/aBksB/2/

编辑：反映评论

Answer 2

这是使用以下代码的示例。

$('ul li ul').find('>li:first').addClass('first').end()
    .find('>li:last').addClass('last');

Answer 3

尝试使用CSS选择器first-child和last-child：

jQuery('.topmenu ul li ul li:first-child').addClass('first');
jQuery('.topmenu ul li ul li:last-child').addClass('last');

Answer 4

使用 > 您可以指定直接子级，如下所示：

$('ul>li').first()

$('ul>li' ).last()

ul>li 仅获取紧邻 ul 节点内的 li 节点。

Answer 5

我认为您想要 first-child 和 last-child：

jQuery('.topmenu ul li ul li:first-child').addClass('first');
jQuery('.topmenu ul li ul li:last-child').addClass('last');

Answer 6

您可以尝试使用 :first 和 :last 选择器...

Answer 7

  <ul class="myclass">
        <li>Items</li>
        <li>Items</li>
        <li>Items</li>
   </ul>

jQuery(".myclass li:last").addClass("last");

大多数时候，最后一个孩子的班级没有添加。如果您想将类添加到 li 的最后一个子级，则该脚本非常有效。