Using Jquery .addClass on html elements in array

Question

I have a few html image tags that fill an array. On the page - http://www.digitalbrent.com/lab - three of the elements in the array are displayed. I need to add a class to them after a button is clicked. The class is different for each if the imgs being displayed from the array. Here's the code:

$(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");

I've also tried it with the selector around the array items, $(imgArr[b]).addClass("left_slot"); but that didn't work either.

Any advice at all would be greatly appreciated. I've looked through similar questions here on stackoverflow but no luck. I've been researching this project for a while now and can't find anything.

Solution 1

Your imgArr only holds an array of strings of the image tags' HTML.

Instead, if you pass that string to the jQuery function, you will get an in-memory node that you can then add to the document.

Try changing your code above to:

$(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);
    });
});

Solution 2

You should be using each() to iterate jQuery collections, and not $.each().

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

Solution 3

You are trying to .addClass to a string - imgArr[b] is a string not an element, you cannot add class to a string. Try something like this:

$(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");

Comments

[GregL]

@DigitalBrent No probs! Is there any aspect of my code that is unclear? Do you understand the important difference between a HTML string and an actual DOM element, especially relating to jQuery? Let me know if I can make anything clearer.