Como faço para montar um <ul> usando jQuery append ()? - jquery

Eu estou tentando usar a função append e encontrei isso:

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

Parece que o <li> elementos processa FORA do <ul> tag.

Isso é um bug do jQuery?

Respostas:

60 para resposta № 1

Não, é um erro do programador. <li>s estão ligados ao seu <ul> ou <ol>, não ao seu recipiente. E acrescentar uma tag de fechamento é sem sentido.

Você está basicamente trabalhando como se o que você estava anexando fosse HTML bruto, e não é; você está realmente trabalhando com o DOM.

Tente isto:

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

Nota: por favor, veja (e upvote) a resposta de Blixt, que expande algumas opções diferentes que são superiores para vários propósitos. Ele merece atenção e não está conseguindo.

---

89 para resposta № 2

Não, você não pode usá-lo assim. append é uma operação atômica, que cria o elemento diretamente.

// 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>");
}

Alternativamente, gere o HTML e adicione tudo de uma vez (isso será mais parecido com o seu código original):

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

Este código é visivelmente mais rápido quando se lida com muitos elementos.

Se você precisar de uma referência para a lista, faça o seguinte em vez de $("#details").append(html);:

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

---

6 para resposta № 3

Eu acho que há um problema no seu loop

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

deve ser eu acho

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

e perder o seguinte a partir do final

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

Demonstração de Trabalho

EDITAR:

Baseado no comentário de George IV, a fim de evitar acrescentar <li> elementos para qualquer <ul> que pode ser um filho do elemento com id "detalhes", simplesmente dê o <ul> element an id quando você adiciona

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

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

você também pode achar este artigo interessante - 43.439 razões para usar append () corretamente

---

1 para resposta № 4

Para uma pequena lista estática, prefiro me desdobrar em uma única expressão.

$("#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 para resposta № 5

Eu usaria algo como se você tivesse os dados em uma Matriz.

var appendToUl = array.join ("

+ array +

");

É muito mais rápido

---