jQueryのループ処理で、最後の要素にしか処理がされない理由

Question

以下のjQueryについて、最後のulにappend()されるliにしか、.slideがaddClass()されないのはなぜですか？

<ul></ul>
<ul></ul>

var arr = ['a'];

for(var i = 0; i < arr.length; i++){

	var slide_box = $("<li>"),
	slideshow = $("ul");

	slide_box.html(arr[i]);
	slideshow.append(slide_box);
        
	slideshow.find(slide_box).addClass("slide");
};

最後の行を以下にすれば.slideはすべてにaddClass()されます。
よって上のコードはslideshowからfind()できていないのだとわかりますが、
しかしなぜfind()できないのかがわかりません。

// slideshow.find(slide_box).addClass("slide");
slideshow.find("li").addClass("slide");

Answer 1

【jqueryオブジェクト】を、複数の対象に対して一度に.append()する場合、
複数の対象の中の「最後の対象」以外に.append()されるのは、
【jqueryオブジェクト】のクローン（複製）だからです。

つまり

<ul id="UL_1"></ul>
<ul id="UL_2"></ul>
<ul id="UL_3"></ul>

に対して、

<script>
  var $li= $("<li>");
  $('ul').append($li);
</script>

とするは、

<script>
  var $li = $("<li>");
  
  //最後じゃないのは、複製をいれて
  $('#UL_1').append($li.clone()); 
  $('#UL_2').append($li.clone()); 

  //最後は、本体をいれる
  $('#UL_3').append($li);
</script>

としていることになります。

「複製$li.clone()」は、「本体$li」とは違うものなので

<script>
  var $li= $("<li>");
  $('ul').append($li);
  
  //本体を指定してクラスを追加
  $('ul').find($li).addClass('test');
</script>

で、「本体$li」にのみクラスが付与されるのは、
書いた通りに動いた結果・・ということになりますね。

Comments

[kata2murin]

いや～、これはまったく知らなかったです。とても勉強になりました。ありがとうございました！