在数组中的html元素上使用Jquery .addClass

时间:2012-03-30 06:01:00

标签: jquery arrays element

我有一些填充数组的html图像标记。在页面上 - http://www.digitalbrent.com/lab - 显示数组中的三个元素。单击一个按钮后,我需要为它们添加一个类。如果从数组中显示imgs,则每个类都不同。这是代码:

$(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上看过类似的问题,但没有运气。我一直在研究这个项目一段时间,找不到任何东西。

3 个答案:

答案 0 :(得分:4)

您的imgArr仅包含图片代码的字符串数组&#39; HTML。

相反,如果将该字符串传递给jQuery函数,您将获得一个内存节点,然后可以将其添加到文档中。

尝试将上面的代码更改为:

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

答案 1 :(得分:1)

您应该使用each()来迭代jQuery集合,而不是$.each()

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

答案 2 :(得分:1)

您正在尝试.addClass到一个字符串 - 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");