jQueryのwrapAllを複数要素にて使いまわしたい

Question

実現したいこと

<div class="wrap">
<ul>
<li>リストA</li>
<li>リストA</li>
<li>リストA</li>
...リストA8個
</ul>
</div>

<div class="wrap">
<ul>
<li>リストB</li>
<li>リストB</li>
<li>リストB</li>
...リストB12個
</ul>
</div>

上記のように同じクラス名を持つボックス内(.wrap内)のリストを6個ずつ区切ってul.class-nameで囲み直したいのですが、リストAのul2個目にリストBの最初の4個が入ってしまいます。(リストA2個＋リストB4個の合計6個をulで囲んでしまう)

リストAとBが干渉し合わずに、それぞれの.wrap内だけで計算してリストで囲みたいです。

前提

現在のjQueryコード

const listWrap = $(".wrap");
const list = $(".wrap li");

listWrap.each(function() {
do {
  listWrap.children("li:lt(6)").wrapAll('<ul class="class-name"></ul>')
  } while(listWrap.children("li").length);
});

試したこと

Shopifyのテーマで使用する予定なので、Shopifyのテンプレート側で.wrapに個別にidをつけて

const listWrap = $(".wrap");
const list = $(".wrap li");

listWrap.each(function() {
   let boxid = $(this).attr('id');
   let boxidSelector = $("#"+boxid);
   list.unwrap();
   do {
      boxidSelector.children("li:lt(6)").wrapAll('<ul class="sclass-name"></ul>')
      } while(boxidSelector.children("li").length);
});

としてみたのですが、こちらはulで囲んでくれなくなりました。

よろしくお願いいたします。

Answer 1

listWrap.each(function() {
do {
  listWrap.children("li:lt(6)").wrapAll('<ul class="class-name"></ul>')
  } while(listWrap.children("li").length);
});

せっかく each() で処理しているのに、中で listWrap を使ってはeach() の意味がありません。function() {の中では listWrap の代わりに $(this) を使いましょう。

Comments

[nana7777]

早速のご回答ありがとうございます！確かにそうですね…！最初は一つだけの予定だったので、idをつけてたのですが、idからクラス名に変更してそのまま全然気づいていませんでした！あっという間に解決しましたー！かなり遠回りしてました。ありがとうございます。