Geek Answers Handbook

JQuery: matching indices of two arrays, a string and an object to replace text in an object?

I have two arrays: one is full of lines, the other is an array of objects. The indices for each correspond, and I want to replace the text of each of the objects in my array of objects with the corresponding text in my array of strings.

For example, I have an array like this:

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

and an array of jQuery objects containing a bunch of span elements:

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

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

I tried a couple of different ways and nothing works. I am missing some kind of logic here, but why doesn't this work ?:

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

EDIT: I think maybe the rest of my function may cause this to not work. Here's the whole 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++; }); } });
+4
source share
7 answers

I hate to end this question with the “everything was a dream after” collage, but it turns out my browser was confused.

Since then I tested my script (and the millions of options that everyone offered) in IE8, and someone else has firefox, and it is not working and is working.

+1
source

Try

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

It seems to me that you do not need a call to makeArray. Just write:

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

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 imagine a jQuery object, such as an extended version of an array. You can use length and [i] in relation to the number of selected DOM elements and the DOM element with a specific index, respectively.

0
source

Your code is fine, although makeArray call makeArray redundant

There must be a mistake elsewhere

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

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

0
source

I think your code does not work, because the variable I was defined outside its scope.

There may be a better solution, but you can try the following:

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

What is the reason for calling $.makeArray ? You can iterate through your gaps like this ...

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

More articles:


All Articles