How to give value form array to div

Question

I have array with coordinates and also the same amount div.Now I need to first value from array to gave first div and so on.

And here is example of arrays

var xList = [265, 152, 364]
var yList = [125, 452, 215]

There is three values in every array as is three div

<div class"box">Box</div>
<div class"box">Box</div>
<div class"box">Box</div>

How to first value gave to first div second to the second div and so on.

And I was thinking about using css like this.

$(".box").css({ top: yList + "px", left: xList + "px" });

I tried to use for loop like here:

for (var i = 0; i < xList.length && i < yList.length; i++) {
        box.style.top = yList[i] + "px";
        box.style.left = xList[i] + "px";
    }

But it did not work. This is just example it is not my real code except this for loop.This example is similar to my real code I have same amount of div as values in array and I need to give to first div first value second div second value and so on. My all code is on this link https://jsfiddle.net/SutonJ/5gyqexhj/35/

Answer 1

In the supplied examples, you're not differentiating between the three different objects of class "box". I expect you'll find jQuery's each() method useful:

$(".box").each(function(index) {
   $(this).css({top: yList[index] + "px", left: xList[index] + "px"}) );
});

... as documented here: https://api.jquery.com/each/