appendに変数を使うと作動しない

Question

jQueryを使ってスライドショーを作っています。

jQuery上で
var $first = $('.images').find('img:first-child');
という変数を作っています。

appendの引数に上記のオブジェクトを指定したいのですが、
変数の名前$firstを入れると動かないのに、
変数の中身$('.images').find('img:first-child')を入れるとちゃんと動きます。これは何故なのでしょうか？

<div class="slideshow">
  <div class="images">
    <img src="photo1.jpg">
    <img src="photo2.jpg">
    <img src="photo3.jpg">
  </div>
  <div>
    <img src="prev.png" class="prev">
    <img src="next.png" class="next">
  </div>
</div>

↓動かないjQuery↓

var $first = $('.images').find('img:first-child');

$('.next').click(function(){
  $('.images').append($first); /*←ここ*/
});

↓動くjQuery↓

var $first = $('.images').find('img:first-child');

$('.next').click(function(){
  $('.images').append($('.images').find('img:first-child')); /*←ここ*/
});

Answer 1

これは何故なのでしょうか？

var $first = $('.images').find('img:first-child'); は取得したタイミングの:first-childの要素が入っています。
なので$('.images').append($first)は何回やっても同じ要素をappendすることになるので変わりません。

Comments

[yukarichang]

なるほど。関数で定義してしまうと、そこから固定されて更新されることはないっていうイメージですかね。ありがとうございました。