如何使用 jQuery 选择上一个 LI

how do i select the previous li using jquery?

本文关键字：上一个 LI 选择 jQuery 何使用      更新时间：2023-09-26

我有一个无序列表，但其中有不同类别的标题。

<ul>
    <h2>header1</h2>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <h2>header2</h2>
    <li>...</li>
</ul>

我正在尝试遍历它们并按日期对它们进行排序，但标题将其抛弃。

我正在使用：

var list = $('#articleList');
list.children("li").each(function () {
    ...
}

我在循环中使用它来选择它前面的那个：

var prev = $(this).prev("li");

出于某种原因，如果您在标题之后的列表项而不是它们之前的列表项上，prev 会选择标题。所以我的排序最终在标题中是正确的，但我需要对整个事情进行排序，而不仅仅是按部分排序。

这将与HTML解析有关。根据规范，列表可能只包含<li>元素，而不包含其他元素。因此，您的浏览器将构建一个不同的 DOM，例如通过将标题包装到列表项中(HTML5 将指定如何处理无效的 HTML(。使用 DOM 检查器查看实际的 DOM 树(上下文菜单 -> 检查元素(。

尝试以下操作：

var prev = $(this).prevUntil('li').first();

我怀疑你不正确的HTML搞砸了jQuery。prev()方法。 ul元素不应具有h2元素作为子元素。

相反，您应该让h2元素成为li元素的子元素，从而使您的 HTML 如下所示：

<ul id="articleList">
    <li class="header"><h2>header1</h2></li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li class="header"><h2>header2</h2></li>
    <li>...</li>
</ul>

请注意，每个包含h2元素的li元素都有一个"标头"类。然后，您可以像这样遍历每个非标头li元素：

var list = $('#articleList');
list.children("li:not(.header)").each(function () {
    ...
}

并像这样获取以前的非标头li元素：

var prev = $(this).prev("li:not(.header)");

这适用于您的 html： 

    var prevLI = $('ul li:last').prevAll('li:first');
    $('body').append('<h2>Selected: '+ prevLI.text() + '</h2>' );

试试这个小提琴：http://jsfiddle.net/guumaster/4Ax6v/1/

相关文章：