Как добавить элементы в неупорядоченный список <ul>с помощью jquery

Question

В моем ответе json я хочу просмотреть его, используя $ .each, а затем добавить элементы к элементу <ul></ul>.

    $.each(data, function(i, item) {

        // item.UserID
        // item.Username

     }

Я хочу добавить

и создать тег href, который ссылается на страницу пользователя.

Answer 1

Самый эффективный способ - создать массив и добавить его в домен один раз.

Вы можете сделать это еще лучше, потеряв всю строку concat из строки. Либо несколько раз нажмите на массив, либо создайте строку с помощью + =, а затем нажмите, но для некоторых становится труднее читать.

Также вы можете обернуть все элементы в родительском элементе (в данном случае ul) и добавить его в контейнер для лучшей производительности. Просто нажмите '<ul>' и '</ul>' до и после каждого и добавьте к div.

data = [
{
  "userId": 1,
  "Username": "User_1"
},
{
  "userId": 2,
  "Username": "User_2"
}
];

var items = [];

$.each(data, function(i, item) {

  items.push('<li><a href="yourlink?id=' + item.UserID + '">' + item.Username + '</a></li>');

}); // close each()

$('#yourUl').append(items.join(''));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="yourUl">
</ul>

Answer 2

Я решил взять отличный ответ Редсквадра и немного улучшить его. Вместо того, чтобы добавлять HTML, я предпочитаю добавлять объекты jQuery. Таким образом, мне не нужно беспокоиться о переходе на HTML, а что нет.

В этом примере data содержит массив объектов, проанализированных из JSON. Каждый объект в массиве имеет свойство .title. Я использую функцию jQuery each для их обхода.

var items=[];
$(data).each(function(index, Element) {
    items.push($('<li/>').text(Element.title));
});
$('#my_list').append.apply($('#my_list'), items);

Я помещаю новый объект jQuery в массив элементов, но с помощью цепочки методов я могу заранее задавать свойства, такие как .text.

Затем я добавляю массив объектов в список <ul id="my_list">, используя метод Ларса Герсмана .

Answer 3

Получите <ul> с использованием синтаксиса селектора jQuery, а затем вызовите append:

$("ul#theList").append("<li><a href='url-here'>Link Text</a></li>");

См. jQuery docs для получения дополнительной информации.

Answer 4

$.each(data, function(i, item) {

       var li = $("<li><a></a></li>");

       $("#yourul").append(li);

       $("a",li).text(item.Username);
       $("a",li).attr("href", "http://example.com" + item.UserID);

    }