JQuery append array value to each list item

Question

I have an unordered list like this:

<ul id="names-list">
 <li></li>
 <li></li>
 <li></li>
 <li></li>
</ul>

Lets say I want to add a name from this list to each of the <li> items:

var names = [ "Jon", "Nick", "Bill", "Tom" ];

And my code is like this:

$('#names-list li').each(function () {
 $(this).append(names);
});

But from some reason it doesn't work. Can someone tell me what am I doing wrong? Thanks.

Daniel Tonon · Accepted Answer · 2021-08-01 08:35:29Z

Why has no one pointed out that basing the number of li's on the number of empty li's in the dom is a horrible way to do it? It's much better to generate the li's based on how many items there are in the array.

Try this instead:

HTML

<div id="parent">
    <ul id="names-list">
        <!-- empty list -->
    </ul>
</div>

JS

var names = [ "Jon", "Nick", "Bill", "Tom" ];
var list = $("#names-list");
var parent = list.parent();

list.detach().empty().each(function(i){
    for (var x = 0; x < names.length; x++){
        $(this).append('<li>' + names[x] + '</li>');
        if (x == names.length - 1){
            $(this).appendTo(parent);
        }
    }
});

I define the names list, the list element, and the list elements parent
I detach the list from the dom so it doesn't refresh the dom for every list item added.
I empty the list in case there are already values in there
The each statement is more for triggering a function in relation to #names-list rather than handling multiple occurances of the list on the page
I run a loop going through each item in the array
I append a list item with each name in the array to the detached #names-list
On the final loop, I add the full list back into the dom by appending it to the parent element

Update: Pure JS, modern syntax version

If you are able to use modern code then this is a pure JS es6 version that I would use today:

const names = [ "Jon", "Nick", "Bill", "Tom" ];
const listElem = document.querySelector("#names-list");

// Creates a string of HTML to inject rather than appending DOM elements
const listItemsHtml = names.map(name => `<li>${name}</li>`).join('');

// Replaces the current content in the list with the new content
listElem.innerHTML = listItemsHtml

Julien Lafont · Accepted Answer · 2012-03-21 12:56:02Z

12

The each() method has an "index" argument. Use it to get the proper value in your list.

var names = [ "Jon", "Nick", "Bill", "Tom" ];
$('#names-list li').each(function (index) {
    $(this).text(names[index]);
});

Demo: http://jsfiddle.net/7ESKh/

edited Mar 21, 2012 at 12:56

answered Mar 21, 2012 at 12:42

Julien Lafont

7,8772 gold badges34 silver badges52 bronze badges

Comments

jb10210 · Accepted Answer · 2012-03-21 12:51:54Z

1

Use the index property provided to the each function. Also, since it's text data you could use the .text(...) function:

$('#names-list li').each(function (index) {
  $(this).text(names[index]);
});

See jsFiddle

answered Mar 21, 2012 at 12:51

jb10210

1,1765 silver badges16 bronze badges

Comments

Hardik Patel · Accepted Answer · 2012-03-21 12:42:44Z

-2

var index = 0;
$('#names-list li').each(function () {
 $(this).html(names[index]);
 index = index + 1;
});

answered Mar 21, 2012 at 12:42

Hardik Patel

8385 silver badges12 bronze badges

Collectives™ on Stack Overflow

JQuery append array value to each list item

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related