JQuery добавляет значение массива к каждому элементу списка - PullRequest
Новая
       26

JQuery добавляет значение массива к каждому элементу списка

4 голосов
/ 21 марта 2012

У меня есть неупорядоченный список, подобный этому: 

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

Допустим, я хочу добавить имя из этого списка к каждому из <li> элементов: 

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

Имой код выглядит так: 

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

Но по какой-то причине он не работает.Может кто-нибудь сказать мне, что я делаю не так?Спасибо.

Ответы [ 4 ]

15 голосов
/ 29 октября 2014

Почему никто не указал, что основание количества li на количестве пустых li в dom - это ужасный способ сделать это? Намного лучше генерировать li на основе количества элементов в массиве.

Попробуйте вместо этого:

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);
        }
    }
});
  1. Я определяю список имен, элемент списка и родительский элемент списка
  2. Я отрываю список от домена, чтобы он не обновлял дом за каждый добавленный элемент списка.
  3. Я очищаю список на случай, если там уже есть значения
  4. Каждый оператор больше предназначен для запуска функции по отношению к # names-list, а не для обработки нескольких вхождений списка на странице
  5. Я запускаю цикл, проходящий через каждый элемент в массиве
  6. Я добавляю элемент списка с каждым именем в массиве в отдельный # names-list
  7. В последнем цикле я добавляю полный список обратно в dom, добавляя его к родительскому элементу
11 голосов
/ 21 марта 2012

Метод each () имеет аргумент index. Используйте его, чтобы получить правильное значение в вашем списке. 

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

Демо: http://jsfiddle.net/7ESKh/

1 голос
/ 21 марта 2012

Используйте свойство index, предоставляемое каждой функции.Кроме того, поскольку это текстовые данные, вы можете использовать функцию .text(...): 

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

См. jsFiddle

0 голосов
/ 21 марта 2012 
var index = 0;
$('#names-list li').each(function () {
 $(this).html(names[index]);
 index = index + 1;
});
...