下記の動作するソースでは２個ずつの<div class="inner">～</div>が<div></div>で囲まれます。
しかし、動作しないソースにありますようにクラス名をなくすと動作しません。
.childrenは自分自身を含まないという認識なのですが、クラス名を取ってしまうとうまく動作しなくなる原因がわかりません。
クラスをつけずに動作させたいのですが、どのようなコードに変更すればいいのか教えていただけますでしょうか。

■動作するソース

<script type="text/javascript">
$(function(){
	do {
		$("#wrap").children("div.inner:lt(2)").wrapAll('<div></div>')
	}while($("#wrap").children("div.inner").length);
});
</script>

<div id="wrap">
    <div class="inner">あああああ</div>
    <div class="inner">いいいいい</div>
    <div class="inner">ううううう</div>
    <div class="inner">えええええ</div>
    <div class="inner">おおおおお</div>
</div>

■動作しないソース

<script type="text/javascript">
$(function(){
	do {
		$("#wrap").children("div:lt(2)").wrapAll('<div></div>')
	}while($("#wrap").children("div").length);
});
</script>

<div id="wrap">
    <div>あああああ</div>
    <div>いいいいい</div>
    <div>ううううう</div>
    <div>えええええ</div>
    <div>おおおおお</div>
</div>

miyabi-sun

2018/03/16 03:45 編集

まずdo-whileの中身に到達しているか否かを調査してください。F12でデベロッパーツールを開きながら、`console.log(123)`等のコードを差し込めば判別できます。またdo〜whileが無限ループなので実践では使ったら駄目な奴なんですが必須ですか？

cp_cop

2018/03/16 05:10

そもそもの動き方を勘違いしていました。これでは無限ループしてしまいますね。ありがとうございました。

行動規範の内容に同意します

回答2件

ベストアンサー

while($("#wrap").children("div").length);
が0になることは無いので永久ループするのでは？

追記

あえてやるならこうですかね？

javascript
1<script>
2$(function(){
3  do{
4    $("#wrap>div:not(:has(div)):lt(2)").wrapAll('<div></div>');
5  }while($("#wrap>div:not(:has(div))").length>0);
6});
7</script>
8
9<div id="wrap">
10    <div>あああああ</div>
11    <div>いいいいい</div>
12    <div>ううううう</div>
13    <div>えええええ</div>
14    <div>おおおおお</div>
15</div>

投稿2018/03/16 03:47

編集2018/03/16 04:06

yambejp

総合スコア114839

cp_cop

2018/03/16 05:06

ご回答ありがとうございます。そもそもの動き方を勘違いしていました。永久ループしますね。とても参考になりました。ありがとうございました。

行動規範の内容に同意します

前者のコードを実行すると、以下のようになりますよね。３行以降は省略します。

HTML
1<div>
2  <div class="inner">あああああ</div>
3  <div class="inner">いいいいい</div>
4</div>

この形になるとwhileの条件になっている$("#wrap").children("div.inner").lengthが
少なくなっていき、いずれゼロになるので処理が終了します。

後者のコードを実行しても、１週目は上記と同じ状態になりますが、
２週目から無茶苦茶になってんじゃないですかね。
div.inner:lt(2)ではなく、div:lt(2)ですからね。
wrapAllで追加したdivも拾われます。

HTML
1<!-- 1週目 -->
2<div> <!-- このdivと -->
3  <div class="inner">あああああ</div>
4  <div class="inner">いいいいい</div>
5</div>
6<div class="inner">ううううう</div> <!-- このdivが次の２つのdiv -->
7<div class="inner">えええええ</div>
8<div class="inner">おおおおお</div>
9
10<!-- 2週目 -->
11<div> <!-- このdivと -->
12  <div>
13    <div class="inner">あああああ</div>
14    <div class="inner">いいいいい</div>
15  </div>
16  <div class="inner">ううううう</div>
17</div>
18<div class="inner">えええええ</div> <!-- このdivが次の２つのdiv -->
19<div class="inner">おおおおお</div>
20
21<!-- 3週目 -->
22<div> <!-- このdivと -->
23  <div>
24    <div>
25      <div class="inner">あああああ</div>
26      <div class="inner">いいいいい</div>
27    </div>
28    <div class="inner">ううううう</div>
29  </div>
30  <div class="inner">えええええ</div>
31</div>
32<div class="inner">おおおおお</div> <!-- このdivが次の２つのdiv -->
33
34<!-- 4週目 -->
35<div>
36  <div>
37    <div>
38      <div>
39        <div class="inner">あああああ</div>
40        <div class="inner">いいいいい</div>
41      </div>
42      <div class="inner">ううううう</div>
43    </div>
44    <div class="inner">えええええ</div>
45  </div>
46  <div class="inner">おおおおお</div>
47</div>

そして、きわめつけはwhileの条件となっている$("#wrap").children("div").lengthです。
上記の通り、#wrapの子供からdivが消えることはありませんので無限ループです。
div.innerは消えるので、前者ではうまくいくのです。

投稿2018/03/16 04:31

root_jp

総合スコア4666

cp_cop

2018/03/16 05:14 編集

ご回答ありがとうございます。詳しく解説していただき、そもそもの動き方を勘違いしていることに気づきました。これでは無限にループしてしまいますね。とても参考になりました。ありがとうございました。とてもご丁寧な解説をいただきとても参考になったのですが、BAは最初にご回答いただいた方とさせていただきます。申し訳ありません。