1

.l1 .l2 .l3 などのクラスを持つ一連の LI 要素があり、深さのレベル数が必要です。

私がする必要があるのは、li.l1 の次の要素が li.l2 の場合、それらすべてを ul でラップし、それらを li.l1 内に移動することですが、次の li.l1 に到達したときに停止する必要があります。

基本的に、この単一のリストをクラス名に基づいて一連のネストされたリストにフォーマットしようとしています。さらに、作成されたサブリストごとに機能する必要があります。

簡単に言えば、これを回す必要があります...

<ul>
<li class="l1">Text</li>
<li class="l1">Text</li>
<li class="l2">Text</li>
<li class="l2">Text</li>
<li class="l2">Text</li>
<li class="l3">Text</li>
<li class="l4">Text</li>
<li class="l2">Text</li>
<li class="l2">Text</li>
<li class="l2">Text</li>
<li class="l2">Text</li>
<li class="l2">Text</li>
<li class="l1">Text</li>
<li class="l1">Text</li>
<li class="l1">Text</li>
<li class="l2">Text</li>
<li class="l2">Text</li>
<li class="l2">Text</li>
<li class="l2">Text</li>
<li class="l1">Text</li>
<li class="l2">Text</li>
<li class="l2">Text</li>
<li class="l2">Text</li>
<li class="l2">Text</li>
<li class="l2">Text</li>
<li class="l1">Text</li>
<li class="l1">Text</li>
<li class="l1">Text</li>

この中に...

<ul>
    <li class="l1">Text1</li>
    <li class="l1">Text1
    <ul>
        <li class="l2">Text2</li>
        <li class="l2">Text2</li>
        <li class="l2">Text2
        <ul>
            <li class="l3">Text3
            <ul>
                <li class="l4">Text4</li>
            </ul>
            </li>
        </ul>
        </li>
        <li class="l2">Text2</li>
        <li class="l2">Text2</li>
        <li class="l2">Text2</li>
        <li class="l2">Text2</li>
        <li class="l2">Text2</li>
    </ul>
    </li>
    <li class="l1">Text1</li>
    <li class="l1">Text1</li>
    <li class="l1">Text1
    <ul>
        <li class="l2">Text2</li>
        <li class="l2">Text2</li>
        <li class="l2">Text2</li>
        <li class="l2">Text2</li>
    </ul>
    </li>
    <li class="l1">Text1
    <ul>
        <li class="l2">Text2</li>
        <li class="l2">Text2</li>
        <li class="l2">Text2</li>
        <li class="l2">Text2</li>
        <li class="l2">Text2</li>
    </ul>
    </li>
    <li class="l1">Text1</li>
    <li class="l1">Text1</li>
    <li class="l1">Text1</li>
</ul>

jQuery wrapAll() を使用して特定のクラスの要素をラップできることは知っていますが、別のクラスのアイテムにヒットしたときにそれを停止し、これらをスキップして次のセットの新しいラップを開始する方法がわかりません。

私は li.l1.next().siblings('li.l2') の行に沿って何かを考えていましたが、それを適切に肉付けするのに十分なjQueryを知りません!

これまでに思いついた最高のものはこれです...

$('.sitemap li.l1').each(function(){ 
    $(this).nextUntil('.l1').wrapAll('<ul></ul>'); 
})
$('.sitemap li.l2').each(function(){ 
    $(this).nextUntil('.l2').wrapAll('<ul></ul>'); 
})         
$('.sitemap li.l3').each(function(){ 
    $(this).nextUntil('.l3').wrapAll('<ul></ul>'); 
})                 
$('.sitemap li.l4').each(function(){ 
    $(this).nextUntil('.l4').wrapAll('<ul></ul>'); 
})

しかし、これはリストをネストせず、要素をラップするだけです

乾杯、R.

4

1 に答える 1