実現したいこと
html
1<div class="wrap"> 2<ul> 3<li>リストA</li> 4<li>リストA</li> 5<li>リストA</li> 6...リストA8個 7</ul> 8</div> 9 10<div class="wrap"> 11<ul> 12<li>リストB</li> 13<li>リストB</li> 14<li>リストB</li> 15...リストB12個 16</ul> 17</div>
上記のように同じクラス名を持つボックス内(.wrap内)のリストを6個ずつ区切ってul.class-name
で囲み直したいのですが、リストAのul2個目にリストBの最初の4個が入ってしまいます。(リストA2個+リストB4個の合計6個をulで囲んでしまう)
リストAとBが干渉し合わずに、それぞれの.wrap内だけで計算してリストで囲みたいです。
前提
現在のjQueryコード
jQuery
1const listWrap = $(".wrap"); 2const list = $(".wrap li"); 3 4listWrap.each(function() { 5do { 6 listWrap.children("li:lt(6)").wrapAll('<ul class="class-name"></ul>') 7 } while(listWrap.children("li").length); 8});
試したこと
Shopifyのテーマで使用する予定なので、Shopifyのテンプレート側で.wrap
に個別にidをつけて
jQuery
1const listWrap = $(".wrap"); 2const list = $(".wrap li"); 3 4listWrap.each(function() { 5 let boxid = $(this).attr('id'); 6 let boxidSelector = $("#"+boxid); 7 list.unwrap(); 8 do { 9 boxidSelector.children("li:lt(6)").wrapAll('<ul class="sclass-name"></ul>') 10 } while(boxidSelector.children("li").length); 11});
としてみたのですが、こちらはulで囲んでくれなくなりました。
よろしくお願いいたします。
![guest](/img/icon/icnUserSample.jpg)
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2023/04/17 04:39