jqueryで htmlの閉じタグ だけを 動的に追加したい

Question

いつもお世話になっております。

下記のようなhtmlタグに対して、
liタグ4個ごとに、その直後でul要素を一度閉じて、

<div class="kaigyo"></div>

というタグを挿入した上で

<ul class="printpage">タグを再び追加する・・

という処理を動的に行いたいのですが、
afterやappendなどでは閉じタグだけ追加すると自動的に補完されてしまい思ったような動作になりません。

なにか良い方法はないでしょうか。

例えば、下記のようなタグを

<ul class="printpage">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

下記のように動的に処理したいです。

<ul class="printpage">

<li></li>
<li></li>
<li></li>
<li></li>

</ul>
<div class="kaigyo"></div>
<ul class="printpage">

<li></li>
<li></li>
<li></li>
<li></li>

</ul>
<div class="kaigyo"></div>
<ul class="printpage">

<li></li>
<li></li>
<li></li>
<li></li>
<li></li>

</ul>

下記のようにjqueryで記述してみたのですが

    $(function(){
        $('ul.printpage li:nth-child(4n)').after('<div class="kaigyo"></div>');
    });

<ul class="printpage">

<li></li>
<li></li>
<li></li>
<li></li>

<div class="kaigyo"></div>
<ul class="printpage"></ul>

<li></li>
<li></li>
<li></li>
<li></li>

</ul>

どうしてもこの様になってしまって意図通りにできません。

ご教授のほどよろしくおねがいします。

Answer 1

DocumentFragment を作って置き換えます。

var original = $('.printpage');
var fragment = document.createDocumentFragment();
var lis;
while (lis = $('>li', original), lis.length) {
  var container = $(original[0].cloneNode(false));
  container.append($('>li', original).slice(0, 4));
  fragment.appendChild(container[0]);
  fragment.appendChild($('<div class="kaigyo"></div>')[0]);
}

fragment.removeChild(fragment.lastChild);
original.replaceWith(fragment);

https://developer.mozilla.org/ja/docs/Web/API/DocumentFragment
https://api.jquery.com/slice/
https://api.jquery.com/replaceWith/

Answer 2

<script>
$(function(){
  var newUL=[];
  while($('.printpage li').length>0){
    if(newUL.length>0) newUL.push($('<div class="kaigyo"></div>'));
    newUL.push($('<ul class="printpage">').append($('.printpage li:lt(4)')));
  }
  $('.printpage').after(newUL).remove();
});
</script>
<ul class="printpage">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
</ul>

Comments

[Novz]

ありがとうございます！

多くの例をいただき、自分の技術の未熟さを痛感しました。

yambejp様のコードが私の技術でも理解しやすく、これからli要素の個数が増えていく場合も対応できそうでしたのでベストアンサーにさせていただきます。

本当にありがとうございました。感謝しております。

Answer 3

回りくどく作ってみました。

<div id="parent">
	<ul class="printpage">
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
		<li>8</li>
		<li>9</li>
		<li>10</li>
		<li>11</li>
		<li>12</li>
		<li>13</li>
		<li>14</li>
		<li>15</li>
		<li>16</li>
	</ul>
</div>

<script>
const sep = 4;
$(function(){
	const kaigyo = $('<div></div>',{
		class:'kaigyo'
	});
	
	const li_count = $('.printpage').children('li').length;
	let ulnew = $('<ul></ul>');
	for(let i = 1;i<=li_count;i++){
		let cnt = i-1;
		ulnew.append($($('.printpage').children('li').get(cnt)).clone(true));
		if((i%4)==0){
			ulnew.after(kaigyo);
			$('#parent').append(ulnew);
			ulnew = $('<ul></ul>');
		}
	}
	$('.printpage').remove();
	$('ul').addClass('printpage');
});

sepで割り切れなかったりした分の余りとかは考えてみてください。

Answer 4

var origin=$('.printpage');
$('>li:nth-of-type(n):nth-of-type(-n+4)', origin).wrapAll('<ul class="printpage"></ul>');//最初の4つをprintpageで包みます
$('>li:nth-of-type(n):nth-of-type(-n+4)', origin).wrapAll('<ul class="printpage"></ul>');//4回繰り返します
$('>li:nth-of-type(n):nth-of-type(-n+4)', origin).wrapAll('<ul class="printpage"></ul>');
$('>li:nth-of-type(n):nth-of-type(-n+4)', origin).wrapAll('<ul class="printpage"></ul>');
$('>ul:nth-of-type(n):nth-of-type(-n+3)', origin).after('<div class="kaigyo"></div>');//最初の3つの後にkaigyoを入れます
$('>*', origin).unwrap();//外側のprintpageをunwrapします。

Comments

[querykuma]

> teratailは技術に興味のある人達が集まって、質問と回答を通してお互いに知識や情報を交換・共有する場所です。
> ここは、お互いの好意の上に成り立っている助け合いの場であり、自分がわからないところを人に教えてもらい、自分がわかるところを人に教えてあげる場所です。
> https://teratail.com/help/question-tips

悪意でteratailに参加している方がいるとは思いたくありませんが、何故低評価を押されたのでしょうか？
何が低評価の理由になったのかコメントに書いていただけると幸いです。

[x_x]

実行してみれば意図通りになっていないことははっきりするのでは？
一度でも確認してみたのでしょうか？

[querykuma]

jquery-3.4.1と1.12.4で、FirefoxとChromeで4回確認しましたが意図通りになっていると思います。
あなたのプログラムについても4回確認しました。
何をおっしゃっているのか分かりません。
「一度でも確認してみたのでしょうか？」というあなたに私のプログラムを一度でも確認したのか聞きたいぐらいです。

[x_x]

もちろんわたしは確認しましたが、その時から内容が変わっているようですね