配列のhtml要素にJquery .addClassを使用する

Question

配列を埋めるhtmlイメージタグがいくつかあります。ページのhttp://www.digitalbrent.com/lab - 配列内の3つの要素が表示されます。ボタンをクリックした後でクラスを追加する必要があります。 imgが配列から表示される場合は、クラスはそれぞれ異なります。 。ここでは、コードです：

$(document).ready(function(){  //populates array with images 

    var shipImgs = $("#thumb_slider").children(); 
    console.log(shipImgs); 

    $.each(shipImgs,function(i,elem){ 
     var tag = "<img src='" + $(elem).attr('src') + "' alt='space'/>"; // This is how I made the image tags. 
     imgArr.push(tag); 
    }); 
    console.log(imgArr); 

}); 

$("#basic_ul").html(imgArr[b] + imgArr[a] + imgArr[c]); //displays the images 
     imgArr[b].addClass("left_slot"); 
     imgArr[a].addClass("middle_slot"); 
     imgArr[c].addClass("right_slot"); 

私はまた、配列項目の周りのセレクタ、$（imgArr [B]）addClass（ "left_slot"）でそれを試してみたが、しかしそれはどちらもうまくいかなかった。

アドバイスをいただければ幸いです。私はstackoverflow上で同様の質問を見てきましたが、運はありません。私は今このプロジェクトをしばらくは研究しており、何も見つけることができません。

Answer 1

imgArrは、画像タグのHTML文字列の配列のみを保持します。

代わりに、その文字列をjQuery関数に渡すと、ドキュメントに追加できるメモリ内ノードが取得されます。

がに上記のコードを変更してみてください：あなたは、文字列に .addClassしようとしている

$(document).ready(function(){  //populates array with images 
    var $basicUl = $('#basic_ul'); // cache the selector 
    var shipImgs = $("#thumb_slider").children().each(function(index, element) { 
     var newImg = $("<img />").attr({src: this.src, alt: 'space'}).addClass(index == 0 ? "middle_slot" : (index == 1 ? "left_slot" : "right_slot")); 
     $basicUl.append(newImg); 
    }); 
}); 

Answer 2

を使用して、$.each()ではなく、jQueryコレクションを反復処理する必要があります。

shipImgs.each(function() { 
    var img = "<img src='" + $(this).attr('src') + "' alt='space'/>"; 
    imgArr.push(img); 
}); 

Answer 3

からimgArr[b]が文字列でない要素であり、あなたは文字列にクラスを追加することはできません。

$(document).ready(function(){  //populates array with images 

    var shipImgs = $("#thumb_slider").children(); 
    console.log(shipImgs); 

    $.each(shipImgs,function(i,elem){ 
     var tag = $("<img src='" + $(elem).attr('src') + "' alt='space'/>"); // This is how I made the image tags. 
     imgArr.push(tag); 
    }); 
    console.log(imgArr); 

}); 

$("#basic_ul").append(imgArr[b]); 
$("#basic_ul").append(imgArr[a]); 
$("#basic_ul").append(imgArr[c]); 
imgArr[b].addClass("left_slot"); 
imgArr[a].addClass("middle_slot"); 
imgArr[c].addClass("right_slot");