Question

<ul>
<li></li>  
<li></li>   
<li></li>   
<li></li>   
<li></li>    
</ul>

var obj = { one:1, two:2, three:3, four:4, five:5 };

 var list = $("div");
    jQuery.each(obj, function(i, val) {
  list.html( val);
});

I am attempting to iterate through this array and append each value into the list items so that it appears as such:

<ul>
<li>1</li>  
<li>2</li>   
<li>3</li>   
<li>4</li>   
<li>5</li>   
</ul>

My problem is that the code only appeands the last item from the array: 5.

Not sure what I am doing wrong.

Answer 1

Use the value of the element to target the li it should be placed in:

$.each( obj, function( i, v ) {
  $("ul li").eq(v-1).html(v);
});

Demo: http://jsfiddle.net/3RAQC/

Results in the following:

<ul>
    <li>1</li>  
    <li>2</li>   
    <li>3</li>   
    <li>4</li>   
    <li>5</li>    
</ul>