jqueryのcloneメソッドについて

Question

jqueryでsetIntervalの中で予めcloneでコピーしたものに書き換える際に、
2回目以降正しくcloneがなされないようで、勝手にonクラスがついてしまいます。
(現在はcloneを使わずに変数の中にhtmlタグを入れると上手くいっています。)
また、if文で初期化して時間差で「on」クラスを付けるようにしているのですが、2回目以降のifでonが付きません。
そちらも合わせて教えていただけると助かります。

<ul id="bg_slider">
      <li class="bg_01"></li>
      <li class="bg_02"></li>
      <li class="bg_03"></li>
    </ul>

$(function(){
	  var count = 0;
//	  var clone = $("#bg_slider li").clone();
//こちらでは、上手く処理されます。
	var clone = '<li class="bg_01"></li><li class="bg_02"></li><li class="bg_03"></li>';
	
  var bg_slider = function(){
	
    $("#bg_slider li").eq(count).addClass("on");
	  count++
	  if (count == $("#bg_slider li").length + 1){
		   $("#bg_slider li:not(:last-child)").remove();
		  $("#bg_slider").append(clone);
		  count = 1;
		  
		   $(document).delay(10).queue(function(){
//2回目以降処理がなされない、またdelayしないとonの中に書いたtransitionが起動しない。
			   $("#bg_slider li:nth-child(2)").addClass("on").dequeue();
			   count = 2;
		   });
		 }
  } 

  bg_slider();
  setInterval(bg_slider, 2600);
});	

追記

イメージ的にはこちらのサイトのような背景スライドショーを作成しています。
https://vegas.jaysalvat.com/

Comments

[yambejp]

結局意図している動作はどういうものなのでしょか？
2.6秒に一度なにかをしたいのでしょうけど・・・

[web11]

申し訳ありません、単純な背景のスライドショーです。
イメージ的にはこちらのサイトのようなものが、やりたかったです。
https://vegas.jaysalvat.com/

js側ではcssのつけ外しのみを行いまして、cssのtransitonの方でアニメーションはつけています。
(特に処理の部分とは関係ない部分だったので省かせて頂きました。)
setIntervalさせて、最後のスライドショーでonクラスを削除する場合だと、最初のcssに戻るアニメーションが実行されてしまうので、わざわざ、最後以外のliを削除して新たにliを追加してonクラスを付けるようにしたかったです。

Answer 1

こんにちは、jQueryのクローンメソッドは無理そうなので、下のようにしたらどうでしょう

var clone = $("#bg_slider").html().trim();

それから、delayメソッドのところはnextをつかってみてはどうでしょう

$(document)
    .delay(10)
    .queue(function (next) {
        //2回目以降処理がなされない、またdelayしないとonの中に書いたtransitionが起動しない。
        $("#bg_slider li:nth-child(2)").addClass("on");
        count = 2;
        next();
    });

Comments

[web11]

回答ありがとうございます。
クローンメソッドの件解決しました。
また後学のために、クローンメソッドだとなぜ、できないか分かったりしますか？
(変な挙動になるというか...)

queueにコールバック渡して削除できるんですね、知らなかったです。
また、thisに変更すればdequeueも効くようになりました。

[fake_shibe]

クローンは自分もよく分かりませんね。

[web11]

なるほど...
ありがとうございました。
.html().trim();でも似たような事できるので、余り気にしなくても良さそうですね。
自分でも、もう少し調べてみます。
ベストアンサーに選ばせていただきます。