Как собрать <ul> с помощью jQuery append()?

Я пытаюсь использовать функцию append и столкнулся с этим:

$("#details").append('<ul>');
for (var i = 0; i < 10; i++) {
    $("#details").append('<li>something</li>');
}
$("#details").append('</ul>');

Похоже, что элементы <li> отображают OUTSIDE тегом <ul>.

Является ли это ошибкой jQuery?

Ответы

Ответ 1

Нет, это ошибка программиста. <li> прикрепляются к их <ul> или <ol>, а не к его контейнеру. И добавление тега close является бессмысленным.

В основном вы работаете так, как будто вы добавляете файлы с необработанным HTML, и это не так; вы на самом деле работаете с DOM.

Попробуйте следующее:

var list = $("#details").append('<ul></ul>').find('ul');
for (var i = 0; i < 10; i++)
    list.append('<li>something</li>');

Примечание. см. (и выше) ответ Blixt, который расширяется на пару различных опций, которые превосходят различные цели. Он заслуживает внимания и не получил его.

Ответ 2

Нет, вы не можете так использовать. append - это атомная операция, которая непосредственно создает элемент.

// The <ul> element is added to #details, then it is selected and the jQuery
// selection is put in the "list" variable.
var list = $('<ul/>').appendTo('#details');
for (var i = 0; i < 10; i++) {
    // New <li> elements are created here and added to the <ul> element.
    list.append('<li>something</li>');
}

Альтернативно, сгенерируйте HTML и добавьте его сразу (это будет больше похоже на ваш исходный код):

var html = '<ul>';
for (var i = 0; i < 10; i++) {
    html += '<li>something</li>';
}
html += '</ul>';
$('#details').append(html);

Этот код заметно быстрее при работе со многими элементами.

Если вам нужна ссылка на список, просто сделайте следующее вместо $('#details').append(html);:

var list = $(html).appendTo('#details');

Ответ 3

Я думаю, что проблема в вашем цикле

for (var i = - i < 10; i++)
    $("#details").append('<li>something</li>');

Я думаю,

for (var i = 0; i < 10; i++)
    $("#details ul").append('<li>something</li>');

и потерять из конца

$("#details").append('</ul>');

Рабочий демонстрационный пример

EDIT:

На основе комментария Джорджа IV, чтобы избежать добавления элементов <li> к любому <ul>, который может быть дочерним элементом элемента с идентификатором " details", просто введите <ul> элемент id при добавлении его -

$("#details").append('<ul id="appended">');

for (var i = 0; i < 10; i++)
    $("#appended").append('<li>something</li>');

вы также можете найти эту статью интересной - 43 439 причин правильно использовать append()

Ответ 4

Для небольшого статического списка я предпочитаю разворачиваться в одно выражение.

$('#details')
   .append($('<ul/>')
      .append('<li>something</li>')
      .append('<li>something</li>')
      .append('<li>something</li>')
      .append('<li>something</li>')
      .append('<li>something</li>')
      .append('<li>something</li>')
      .append('<li>something</li>')
      .append('<li>something</li>')
      .append('<li>something</li>')
      .append('<li>something</li>')
   );

Ответ 5

Я бы использовал что-то вроде, если у вас есть данные в массиве.

var appendToUl = array.join( "

+ array +" );

Это намного быстрее