javascript - Jquery - Cycle Through Spans, Assigning Width From Array

Question

Is there a way to cycle through spans and assign each one an array value.

For example:

I have an array that contains the values [45,50,106]. Is there a way to cycle through when hovering over and applying a span one of the array values. So the first span it comes across gets given the width 45. The second span that it comes across gets given the value 50 and so on?

// Multi-Expanding Icon Version:      
var widths = [];
$("ul#navigation-three").children('li').children('span:nth-child(2)').each(function(){
    widths.push($(this).width());
});

$('ul#navigation-three').hoverIntent(function () {    
    // Assign each span:nth-child(2) with the widths from the array in order
},

function () 
});

Answer 1

Based on your comment, I assume you mean something like:

var widths=[10,20,30];
$("ul#navigation-three > li").children('span:nth-child(2)').each(function(index){
       $(this).animate({"width":+widths[index]+"px"}, 0); 
});

I used the index parameter given the the each() function