Как мога да събера <ul> като използвам jQuery append ()? - jquery

Опитвам се да използвам функцията за добавяне и се сблъсках с това:

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

Изглежда, че <li> елементи прави ВЪНШЕН <ul> маркер.

Това jQuery грешка ли е?

Отговори:

60 за отговор № 1

Не, това е програмна грешка. <li>s са прикрепени към техните <ul> или <ol>, а не до нейния контейнер. А добавянето на близък маркер е безсмислено.

Вие по принцип работите така, сякаш това, което добавяте, е суров HTML код, и не е; вие всъщност работите с DOM.

Опитайте тази:

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

Забележка: моля вижте отговора на Blixt, който разширява няколко различни варианта, които са по-добри за различни цели. Той заслужава внимание и не го получавате.

---

89 за отговор № 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");

---

6 за отговор № 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>");

Работна демонстрация

РЕДАКТИРАНЕ:

Въз основа на коментара на Георги IV, за да се избегне добавянето <li> елементи към всеки <ul> това може да е дете на елемента с id "детайли", просто дайте <ul> елемент идентификатор, когато го добавите -

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

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

може да ви се стори и тази статия интересна - 43 439 причини да използвате правилно приложение ()

---

1 за отговор № 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>")
);

---

-1 за отговор № 5

Бих използвал нещо като, ако имате данните в масив.

var appendToUl = array.join ("

+ масив +

");

Много по-бързо е

---