ブートストラップカルーセル用に別々のdivにサブメニューをラップします

Question

私は自分のワードプレスサイト用の動的サブメニューを作成しています。サブメニューにはタイトル、画像、説明を表示するウォーカーナビゲーションメニューを使用しました。私はブートストラップ・カルーセルを追加したいのを除いて、すべてが完璧に動作しています。サブメニュー内でリストをラップすることはできません。これは私の現在の構造です。達成したいです何

<ul> 
    <li>link 1</li> 
    <li>link 2</li> 
    <li>link 3 
     <ul class="sub-menu"> 
     <li>Sub-menu-item 1</li> 
     <li>Sub-menu-item 2</li> 
     <li>Sub-menu-item 3</li> 
     <li>SUb-menu-item 4</li> 
     </ul> 
    </li> 
</ul> 

はこれです：

<ul> 
    <li>link 1</li> 
    <li>link 2</li> 
    <li>link 3 
     <ul class="sub-menu"> 
     <div class="carousel-class-here"> 
     <li>Sub-menu-item 1</li> 
     <li>Sub-menu-item 2</li> 
     </div> 
     <div class="carousel-class-here"> 
     <li>Sub-menu-item 3</li> 
     <li>Sub-menu-item 4</li> 
     </div> 
     </ul> 
    </li> 
</ul> 

すべてのヘルプや提案をいただければ幸いです。ありがとうございました。

Answer 1

おそらく、jQueryを使ってこのよう

<script> 
    jQuery(function($){ 
     var items = $('.sub-menu > li'); 
     for (var i = 0; i < items.length; i += 2) { 
     items.slice(i, i + 2).wrapAll('<div class="carousel-class-here"></div>'); 
     }; 
    }); 
    </script> 

チェックアウト私のJSfiddle