关闭 HTML 列表，插入元素，使用 jQuery 重新打开列表

Question

首先，我无法访问 HTML。它是由我无法编辑的系统生成的。

我有一个这样的列表：

<ol>
    <li class="odd a one">List Item (type1)</li>
    <li class="even b two">List Item (type1)</li>
    <li class="odd c three">List Item (type1)</li>
    <li class="even d one">List Item (type1)</li>
    <li class="odd a two">List Item (type1)</li>
    <li class="even b three">List Item (type1)</li>
    <li class="odd c one">List Item (type1)</li>
    <li class="even d two">List Item (type2)</li>
    <li class="odd a three">List Item (type2)</li>
    <li class="even b four">List Item (type2)</li>
</ol>

我想使用 jQuery 拆分这个列表并在其中添加一个标题，如下所示：

$('li:contains("type2")').first().before('</ol><h2>Type 2 starts here</h2><ol>')

但是，产生的代码是这样的（根据 Firebug）：

<ol>
    <li class="odd a one">List Item (type1)</li>
    <li class="even b two">List Item (type1)</li>
    <li class="odd c three">List Item (type1)</li>
    <li class="even d one">List Item (type1)</li>
    <li class="odd a two">List Item (type1)</li>
    <li class="even b three">List Item (type1)</li>
    <li class="odd c one">List Item (type1)</li>
    <h2>Type 2 starts here</h2>
    <ol></ol>
    <li class="even d two">List Item (type2)</li>
    <li class="odd a three">List Item (type2)</li>
    <li class="even b one">List Item (type2)</li>
</ol>

有没有办法生成以下代码？：

<ol>
    <li class="odd a one">List Item (type1)</li>
    <li class="even b two">List Item (type1)</li>
    <li class="odd c three">List Item (type1)</li>
    <li class="even d one">List Item (type1)</li>
    <li class="odd a two">List Item (type1)</li>
    <li class="even b three">List Item (type1)</li>
    <li class="odd c one">List Item (type1)</li>
</ol>
<h2>Type 2 starts here</h2>
<ol>
    <li class="even d two">List Item (type2)</li>
    <li class="odd a three">List Item (type2)</li>
    <li class="even b one">List Item (type2)</li>
</ol>

这里有一个小提琴：http://jsfiddle.net/a78pT/1/

Answer 1

大概是这样的吧？

$(document).ready(function () {
    var type1 = $('li:contains("type1")'),
        type2 = $('li:contains("type2")'),
        ol = $('ol'),
        newOL = $('<ol />')
        h2 = $('<h2 />').text('Type 2 starts here');
    ol.empty().append(type1).parent().append(h2).append(newOL.append(type2));
});

工作演示：http://jsfiddle.net/7U3Me/

Answer 2

试试这个：

$('li:first').nextUntil('li:contains("type2")').addBack().wrapAll('<ol>');
$('li:contains("type2"):first').nextAll().addBack().wrapAll('<ol>');
$('ol:eq(1)').after('<h2>Type 2 starts here</h2>');
$('li:first').closest('ol').unwrap();

jsFiddle example

这会产生 HTML：

  <ol>
    <li class="odd a one">List Item (type1)</li>
    <li class="even b two">List Item (type1)</li>
    <li class="odd c three">List Item (type1)</li>
    <li class="even d one">List Item (type1)</li>
    <li class="odd a two">List Item (type1)</li>
    <li class="even b three">List Item (type1)</li>
    <li class="odd c one">List Item (type1)</li>
</ol>
<h2>Type 2 starts here</h2>
<ol>
    <li class="even d two">List Item (type2)</li>
    <li class="odd a three">List Item (type2)</li>
    <li class="even b four">List Item (type2)</li>
</ol>

Answer 3

您可以使用分离来删除和重新插入列表项。然后将它们全部附加到父级

http://jsfiddle.net/a78pT/7/

$("ol").parent().append("<h2>Type 2 starts here</h2>");
var newList = $("<ol></ol>");
$(newList).append($('li:contains("type2")').detach());
$("ol").parent().append(newList);

Answer 4

我的解决方案可能比@pete 的简单一点。

$('body').append("<h2>Type 2 starts here</h2>");
$('body').append("<ol class='two'>");
$('li:contains("type2")').appendTo("ol.two");

可能需要稍作调整，但这是基础。

演示：http://jsfiddle.net/a78pT/9/