0

Firstly, I cannot access the HTML. It's generated by a system I cannot edit.

I have a list like this:

<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>

I want to split this list and put a heading in using jQuery like so:

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

However, the code that results is this (according to 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>

Is there a way of doing this to generate the following code?:

<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>

Here's a fiddle for it all: http://jsfiddle.net/a78pT/1/

4

4 回答 4

4

大概是这样的吧？

$(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/

于 2013-07-02T14:55:15.433 回答
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 示例

这会产生 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>
于 2013-07-02T14:57:18.573 回答
1

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

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);
于 2013-07-02T15:01:03.247 回答
0

我的解决方案可能比@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/

于 2013-07-02T14:56:56.593 回答