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.

Sorry, you may need to press the increase button if you are looking at the page, in order to see the array — Digital Brent
– Digital Brent, Commented Mar 30, 2012 at 6:04

GregL · Accepted Answer · 2012-03-30 06:08:10Z

4

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

answered Mar 30, 2012 at 6:08

GregL

38.2k8 gold badges65 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

GregL Over a year ago

@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.

elclanrs · Accepted Answer · 2012-03-30 06:04:10Z

1

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

answered Mar 30, 2012 at 6:04

elclanrs

94.2k21 gold badges137 silver badges171 bronze badges

Comments

Ilia Frenkel · Accepted Answer · 2012-03-30 06:08:14Z

1

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

answered Mar 30, 2012 at 6:08

Ilia Frenkel

1,98714 silver badges20 bronze badges

Collectives™ on Stack Overflow

Using Jquery .addClass on html elements in array

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related