jQueryでDOM操作を行ったところ、要素の数が3つに増えてしまう。

前提・実現したいこと

jQueryを用いて、DOMの順番を操作し、再出力したい。

該当のソースコード

HTML
1<ul id='myList'>
2	<li>山田</li>
3	<li>鈴木</li>
4	<li>田中</li>
5	<li>上田</li>
6	<li>伊藤</li>
7</ul>

jQuery
1$("#myList").one("click", function() {
2	//ソートを行う
3	var $arr = $('ul#myList li').sort(function(a, b) {
4		return ($(a).text() > $(b).text() ? 1 : -1); //ソート条件
5	});
6
7	//空にする
8	$("#myList").empty();
9
10	//追加する
11	$arr.each(function() {
12		var myObj = $(this).text();
13		$('#myList').append('<li>' + myObj + '</li>');
14	});
15
16});

実行した結果

以下のように、なぜか3つずつ要素が生成されてしまいます。

HTML
1<ul id="myList">
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>鈴木</li>
17</ul>

もちろん理想となる結果は、以下です。

HTML
1<ul id="myList">
2	<li>上田</li>
3	<li>伊藤</li>
4	<li>山田</li>
5	<li>田中</li>
6	<li>鈴木</li>
7</ul>

ループの回し方に問題があるのでしょうか。

解決案とあわせて、理由もご教授いただけますと幸いです。

yamap55

2019/08/14 08:34

再現できません。記載されたコードで動かしてみましたが、意図する動きをしているようです。本事象が発生したコードを再度確認して頂けますでしょうか。下記で動作を確認できます↓ https://jsbin.com/sesataquzu/1/edit?html,js,output ※関係はないと思いますが、jQueryは「jquery-3.1.0.js」を使用しています。

Le-M

2019/08/14 23:50

ありがとうございます。たしかに上記でも環境では正常に動作しているようですね。 WPサイト内での挙動だったので、ほかの原因かもしれないので、いったん回答を締め切らせていただきます。

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

回答1件

ベストアンサー

質問のコードは問題なく動作しています。
Le-Mさんが正しくないコードをキャッシュか何かで読み込んでいるだけです。

html
1<ul id="myList">
2  <li>山田</li>
3  <li>鈴木</li>
4  <li>田中</li>
5  <li>上田</li>
6  <li>伊藤</li>
7</ul>
8<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
9<script>
10$("#myList").one("click", function() {
11    //ソートを行う
12    var $arr = $('ul#myList li').sort(function(a, b) {
13        return ($(a).text() > $(b).text() ? 1 : -1); //ソート条件
14    });
15
16    //空にする
17    $("#myList").empty();
18
19    //追加する
20    $arr.each(function() {
21        var myObj = $(this).text();
22        $('#myList').append('<li>' + myObj + '</li>');
23    });
24
25});
26</script>