使用 wrapAll() 方法將列表項包裝在兩列中

Question

我想將多個 li 組包裝在兩個 div 中，因為項目通過 CMS 在一個<ul>中呈現。 所以情況是這樣的：

<ul>
    <li class="list-1">
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </li>
        <li class="list-2">
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </li>
        <li class="list-3">
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </li>
        <li class="list-4">
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </li>
</ul>

但我想使用 jquery wrapAll 方法或類似於將 list-1 和 list-2 組合到一個 div 中，並將 list-3 和 list-4 組合到第二個 div 中，以獲得此結果：

 <ul> <div class="group-1"> <li class="list-1"> <span>1</span> <span>2</span> <span>3</span> </li> <li class="list-2"> <span>1</span> <span>2</span> <span>3</span> </li> </div> <div class="group-2"> <li class="list-3"> <span>1</span> <span>2</span> <span>3</span> </li> <li class="list-4"> <span>1</span> <span>2</span> <span>3</span> </li> </div> </ul>

有沒有辦法可以通過以下方式實現這一目標：

$( "li:nth-child(1), li:nth-child(2)" ).wrapAll( "<div class='group-1'></div>" );

感謝您的任何建議！

Answer 1

您可以使用此 function 將li分組。

您只需更改groupSep變量，您的列表將根據變量值進行分組。

在您的情況下，我設置groupSep = 2 。

這是演示

 $(document).ready(function() { var groupCounter = 1; var groupSep = 2; var liHtml = ''; $('ul > li').each(function(index, el){ if(((index+1) % groupSep) === 1){ $('ul').append('<div class="group-'+groupCounter+'"></div>'); for(i=0; i<groupSep; i++){ $('ul > li').eq(0).appendTo('ul.group-'+groupCounter); } groupCounter++; } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li class="list-1"> <span>1</span> <span>2</span> <span>3</span> </li> <li class="list-2"> <span>1</span> <span>2</span> <span>3</span> </li> <li class="list-3"> <span>1</span> <span>2</span> <span>3</span> </li> <li class="list-4"> <span>1</span> <span>2</span> <span>3</span> </li> <li class="list-5"> <span>1</span> <span>2</span> <span>3</span> </li> <li class="list-6"> <span>1</span> <span>2</span> <span>3</span> </li> <li class="list-7"> <span>1</span> <span>2</span> <span>3</span> </li> <li class="list-8"> <span>1</span> <span>2</span> <span>3</span> </li> </ul>