Question

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

<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选择标题。所以我的排序最终在标题中是正确的，但我需要整个事情来订购，而不仅仅是部分。

Answer 1

这将与HTML解析有关。截至specification，列表可能只包含<li>个元素，而不包含任何其他元素。因此，您的浏览器将构建一个不同的DOM，例如通过将标题包装到列表项中（HTML5将指定与无效HTML完全相关的内容）。使用DOM检查器查看实际的DOM树（上下文菜单 - ＆gt; Inspect元素）。

Answer 2

尝试以下方法：

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

Answer 3

我怀疑你的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>

请注意，包含li元素的每个h2元素都有一个“标题”类。然后，您可以循环遍历每个非标头li元素：

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

并获取前一个非标题li元素，如下所示：

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

Answer 4

这适用于你的html：

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

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

如何使用jquery选择以前的li？

4 个答案: