在每个“ul”中定位第一个和最后一个“li”答案

【问题标题】：Targeting First and Last "li" in Each "ul"在每个“ul”中定位第一个和最后一个“li”
【发布时间】：2011-08-26 14:35:07
【问题描述】：

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

有什么建议吗？

【问题讨论】：

标签： jquery navigation

【解决方案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/

编辑：反映评论

【讨论】：

这会将类添加到所有uls。我相信他不希望它添加到父ul。

【解决方案2】：

这是一个example，使用下面的代码。

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

【讨论】：

这也有效......我更喜欢这个解决方案......感谢您的帮助！我期待在未来为其他问题做出贡献。

【解决方案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');

【讨论】：

【解决方案4】：

使用>，您可以指定一个直系孩子，如下所示：

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

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

ul>li 仅在 ul 节点内立即获取 li 节点。

【讨论】：

【解决方案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');

【讨论】：

【解决方案6】：

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

【讨论】：

【解决方案7】：

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

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

大多数时候没有添加到最后一个孩子的班级。如果您想将类添加到 li 的最后一个孩子，该脚本可以完美运行。

【讨论】：