0

まず、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/

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 に答える
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 に答える