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>

我需要定位每个sub-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，并将类应用于“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/

编辑：反映意见

Answer 2

以下是使用以下代码的example。

$('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只会在li节点内立即获得ul个节点。

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的最后一个子代中，该脚本将是完美的选择。

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

7 个答案: