针对每个“ul”中的第一个和最后一个“li”

Posted 2021-04-06

我想使用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>

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

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

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

有什么建议？

答案

我假设你所展示的所有内容都在“topmenu”类中。如果它是唯一的，我建议将其更改为ID，并将类应用于“first ul”，因此不必在算法上避免。

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

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

编辑：反映评论

另一答案

这是使用下面代码的example。

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

另一答案

尝试使用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');

另一答案

使用>你可以指定一个直接的孩子，如下所示：

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

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

ul>li只在li节点内获得ul节点。

另一答案

我想你想要first-child和last-child：

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

另一答案

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

另一答案

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

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

大部分时间上课的孩子都没有添加。如果要将类添加到li的最后一个子节点，该脚本将非常有用。