jQueryで該当する全ての要素（.slideshow内のli要素）にクラス（.slide）を追加したいです

Question

var slide_1 = ['images/slide/top_slide_1.png',
              'images/slide/top_slide_2.png',
              'images/slide/top_slide_3.png'　];

$(function(){

  for(var i = 0; i < slide_1.length; i++){
    // slide_1の中にliを作りliの中に画像を格納
    var slide_box = $("<li>"),
        slideshow = $(".slideshow");

        slide_box.html("<img src='"+ slide_1[i] +"'>");
        slideshow.append(slide_box);
        //slide_1のliのそれぞれクラスを与える
        slideshow.find(slide_box).addClass("slide");
      };
});

      <div class="slidshow_wrapper">
        <ul class="slideshow">

        </ul>
      </div>
      <div class="slidshow_wrapper">
        <ul class="slideshow">

        </ul>
      </div>
      <div class="slidshow_wrapper">
        <ul class="slideshow">

        </ul>
      </div>
      <div class="slidshow_wrapper">
        <ul class="slideshow">

        </ul>
      </div>
      <div class="slidshow_wrapper">
        <ul class="slideshow">

        </ul>
      </div>
      <div class="slidshow_wrapper">
        <ul class="slideshow">

        </ul>
      </div>

JQでのliとimgの追加は出来ているのですか”slide”のクラスがなぜか”slide＿show＂の最後のliにしか付与されていません。全ての”slide＿show＂内に作ったのliに”slide”クラスを付与できますか？
※エラーは出ていません
※画像はテストのため一旦統一してるだけです

Comments

[m.ts10806]

「できますか」が質問でしょうか

[yambejp]

.slideshowのulにimgを３つ突っ込んでクラスを振るんでしょうか？
ちょっと質問内容があいまいです

[m.ts10806]

>付与できますか？
「できます」だけで良いということですよね？

Answer 1

$(function(){
  $('.slideshow').append(
    slide_1.map(function(x){
      return $("<li>").addClass('slide').append($('<img>').attr('src',x));
    })
    );
});

Answer 2

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

を、

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

にしてみてはどうでしょうか？

Answer 3

//該当箇所のみ抜粋

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

        slide_box.html("<img src='"+ slide_1[i] +"'>");
        slideshow.append(slide_box);
        //slide_1のliのそれぞれクラスを与える
        slideshow.find(slide_box).addClass("slide");

↓　↓　↓

//該当箇所のみ抜粋

    var slide_box = $("<li class='slide'>"),
        slideshow = $(".slideshow");

        slide_box.html("<img src='"+ slide_1[i] +"'>");
        slideshow.append(slide_box);
        //slide_1のliのそれぞれクラスを与える
        //slideshow.find(slide_box).addClass("slide");