1

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

<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 会选择标题。所以我的排序最终在标题中是正确的，但我需要对整个内容进行排序，而不仅仅是在部分中。

4

4 回答 4

4

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

于 2012-08-02T18:43:45.403 回答
1

我怀疑您不正确的 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)");
于 2012-08-02T18:48:15.360 回答
1

尝试以下操作：

var prev = $(this).prevUntil('li').first();
于 2012-08-02T18:42:47.043 回答
1

这适用于您的html：

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

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

于 2012-08-03T08:22:08.760 回答