Question

$(".IT_Badge").each(function(){
    var badges = $(".IT_Badge").val().trim().split(",");
    for (c = 0; badges.length > c; c++) {
        currentBadge = badges[c];
        currentBadge.replaceWith($("<img/>").attr("src", 'IT_Badges/' + badges[c] + '.png'));
    }
});

I have multiple spans with keywords in them. I need to replace the keywords with images who’s src is the keyword. However, i’m worried that the images placed in the span will be placed in all spans called IT_Badge, hence the for loop and the each. I want the replacement to be on a span by span basis.

Answer 1

You are not setting iconInst to an array every time in the first itteration. It appears that iconInst is not an array by the second itteration. Is this a typo? I think you intended to do

var iconInst = [];
$(".IT_Badge").each(function(i, el){
    iconInst.push($(this).addClass('Inst' + i));
});

iconInst.each(function(){
    var badges = $(this).val().trim().split(",");
    for (c = 0; words.length > c; c++) {
        $(this).contents().replaceWith($("<img/>").attr("src", 'Icon/' + badges[c] + '.png'));
    }
});

If that is the case, please update the question and we’ll continue from there, if not I am not very clear as to what the issue you are trying to deal with is.