0

私はこのリストを持っています：

<ul>
   <li class="level0">First item</li>
   <li class="level1">Second item (children of level0)</li>
   <li class="level2">Third</li>
   <li class="level3">Forth</li>
   <li class="level2">Third</li>
   <li class="level3">Forth</li>
   <li class="level4">Fifth</li>
   <li class="level4">Fifth</li>
   <li class="level2">Second</li>
   <li class="level3">Third</li>
   <li class="level2">Second</li>
</ul>

そして、javascriptまたはjQueryでこのリストを使用してこれを行いたい

<ul>
   <li class="level0">First item</li>
   <ul>
        <li class="level1">Second item (children of level0)</li>
        <ul>
            <li class="level2">Third</li>
            <ul>    
                <li class="level3">Forth</li>
            </ul>
            <li class="level2">Third</li>
            <ul>
                <li class="level3">Forth</li>
                <ul>
                    <li class="level4">Fifth</li>
                    <li class="level4">Fifth</li>
                </ul>
            </ul>
        </ul>
        <ul>
            <li class="level2">Second</li>
            <ul>
                <li class="level3">Third</li>
            </ul>
            <li class="level2">Second</li>
        </ul>
    </ul>
</ul>

これができれば、jQuery のアコーディオンのようなもので表示するのに大いに役立ちます。

どうも！

4

1 に答える 1

1

これを試して：

http://jsfiddle.net/J8LP4/

var re = /\d+$/;

$( "ul li").detach().each( function() {
    doit( this, +this.className.match(re)[0] );
});

function doit( li, level ) {
    var cur = $( "ul:first"),
        prev = cur,
        ul;
    while( level-- ) {
        cur = $( "ul:first", cur );
        if( !cur.length ) {
            cur = $( "<ul>" ).appendTo(prev);
        }
        prev = cur;
    }

    cur.append(li);
}​
于 2012-07-03T20:56:53.370 に答える