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

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

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

        // item.UserID
        // item.Username

     }

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

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

Ответы

Ответ 1

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

Вы можете сделать это еще лучше, потеряв всю строку 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>

Ответ 2

Я решил взять redsquare отличный ответ и немного улучшить его. Вместо добавления 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"> с помощью метода Ларса Герсмана.

Ответ 3

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

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

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

Ответ 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);

    }