Jquery: Matching indexes of two arrays, string and object to replace text in object?

Question

I have two arrays, one is full of strings, the other is an array of objects. The indexes on each correspond, and I want to replace the text of each of the objects in my object array with the corresponding text in my string array.

For example, I have an array like this:

var textarr = ["value1", "value2", "value3"]

and a Jquery object array that contains a bunch of span elements:

var spans = $("span.myClass");
var spanarr = $.makeArray(spans);

I'm trying to use $.each() to iterate over each of the spans and use the corresponding index of my text array to assign a text value to the current span.

I've tried a couple different ways, and nothing seems to work. I'm missing some logic here, but why wouldn't this work?:

        i = 0;
        jQuery.each(spanarr, function() {                    
            $(this).text(textarr[i]);
            i++;
        });

EDIT: I think maybe the rest of my function might be causing this not to work. Here's the entire script:

        $("span input:radio").click(function() {
        if (($(this).is(":checked")) == true) {
            var parent = $(this).parent();
            var aunts = parent.parent().children();
            var parentIndex = aunts.index(parent);
            var indexToNthChild = parentIndex + 1;
            var otherSpans = $(".DropDownMenu span:nth-child(" + indexToNthChild + ")");
            var position = parent.position();
            var topValue = position.top;
            var smallPrice = otherSpans.children("span.dropDownPrice");
            var pricearr = jQuery.makeArray(smallPrice);
            var textarr = [];
            jQuery.each(pricearr, function() {
                textarr[i] = $(this).text();
            });
            alert(textarr); // Returns all the text values expected in array
            var changers = $(".bigPriceChanger");
            var changerarr = $.makeArray(changers);
            $(".DropDownMenu").css({ "top": "-" + topValue + "px" });
            $(".DropDownMenu span").css("background-image", "none");
            parent.css({ "background": "#f3f1e7 url(assets/images/branding/DropDownArrow.gif) no-repeat right" });
            otherSpans.css({ "background": "#f3f1e7 url(assets/images/branding/DropDownArrow.gif) no-repeat right" });
            alert(changearr); // Returns all span objects in array
            i = 0;
            jQuery.each(changearr, function() {                    
                $(this).text(textarr[i]);
                i++;
            });


        }
    });

Answer 1

I think you don't need the call to makeArray. Just write:

i = 0;
jQuery.each($("span.myClass"), function() {                    
    $(this).text(textarr[i++]);
});

Answer 2

You might want to try something like this:

var spans = $("span.myClass");
for(i=0;i<spans.length;i++){
   spans[i].innerHTML = textarr[i];
}

You can think of a jQuery object like an extended version of an array. You can use length and [i] in reference to the number of DOM elements selected and the DOM element at a certain index respectively.

Answer 3

Try

$("span.myClass").each(function (i) {
    $(this).text(textarr[i]);
});

Answer 4

Your code is fine, although the makeArray call is redundant

There must be an error somewhere else,

here is your code running fine in firefox http://jsbin.com/oxiwu

to edit go to http://jsbin.com/oxiwu/edit

Answer 5

I think your code is not working because the variable i was defined outside its scope.

Probably there is a better solution, but you could try the following:

function createF() {
    var i = 0;
    function f() {
        $(this).text(textarr[i]);
        i++;
    }
    return f;
}
f = createF();
jQuery.each(spanarr, f);

Answer 6

What's the reason for calling $.makeArray? You can iterate through your spans like this...

$("span.myClass").each(function(i) {
  alert(textarr[i]);
  $(this).text(textarr[i]);            
});

Answer 7

I hate to end the question with a 'it was all a dream afterall' copout, but it turns out my browser was funked.

I've since checked my script (and the million variations of it that everyone suggested) in IE8 and someone else's firefox, and low and behold, it works.