Was ist die richtige Syntax, um eine Liste mit mehreren Klassen an jQuery anzuhängen?

Question

Ich versuche, eine li an eine Klasse mit mehreren Klassen in der li anzuhängen.

Also meine HTML-Code ist:

<div class="maincontent"> 
    <ul> 

    <div class="content"> 

    <div> 

    </ul> 
</div> 

Und jQuery:

$.getJSON(url, function(data) { 
    $.each(data, function(n, newData) { 
     $(".content") 
     .append("<li class='my-li-class'>") 
     .append("<div class='imageclass'><img src='"+newData.img+"' class='innerimageclass'></div>") 
     .append("<div class='another-inner-div'>") 
     .append("<div class='main-title'>"+newData.title+"</div>") 
     .append("</div>") 
     .append("</li>"); 
    }); 
}); 

ich die Daten aus dem json zu lesen. Die JSON-Daten sind in Ordnung. Ich kann die Daten korrekt anzeigen, wenn ich nur 1 anfüge und den gesamten Code darin hinzufüge. Aber der Code sieht sehr schlecht aus. Also möchte ich es in jede Zeile aufteilen, um nett auszusehen. Ich mache etwas falsch mit dem Append. Bitte helfen Sie.

Danke.

Answer 1

Beim Anhängen <li> wird keine HTML-Zeichenfolge angefügt, sondern ein neues Element angehängt, das geöffnet und geschlossen wird. Deine Divs sind also nicht in den Listenelementen enthalten. Da haben Sie den ganzen HTML-Baum, nur .append() es alles auf einmal:

$.getJSON(url, function(data) { 
    $.each(data, function(n, newData) { 
     $(".content").append(
     "<li class='my-li-class'>" + 
     "<div class='imageclass'><img src='"+newData.img+"' class='innerimageclass'></div>" + 
     "<div class='another-inner-div'>" + 
     "<div class='main-title'>"+newData.title+"</div>" + 
     "</div>" + 
     "</li>"); 
    }); 
}); 

Answer 2

Wenn wir ein Element anhängen, um es zu DOM-Baum hinzugefügt, so, wenn wir den Code zu überprüfen,

$.getJSON(url, function(data) { 
    $.each(data, function(n, newData) { 
     $(".content") 
     .append("<li class='my-li-class'>") 
     .append("<div class='imageclass'><img src='"+newData.img+"' class='innerimageclass'></div>") 
     .... 
    }); 
}); 

Die Zeit Sie haben

$(".content") 
     .append("<li class='my-li-class'>") 

HTML

<div class="content"> 
    <li class='my-li-class'></li> 
<div> 

geändert wurde

Weiter Appen geschieht nicht innerhalb werden li

Es gibt mehrere Möglichkeiten, wie Sie es tun können,

Erstellen Sie eine Variable und hängen Sie ihn an div.content.

var htmlData = "<li class='my-li-class'>" + 
    "<div class='imageclass'><img src='"+newData.img+"' class='innerimageclass'></div>" + 
    "<div class='another-inner-div'>" + 
    "<div class='main-title'>"+newData.title+"</div>" + 
    "</div>" + 
    "</li>"); 

Oder wenn Sie wirklich wollen, es ist wirklich sauber zu machen, verwenden Sie createelement und damit verbundene Funktion erstellt jedes Element einzeln und es schließlich in den div.content.

Answer 3

Bitte beachten Sie: Es ist deutlich schneller, mehrere Elemente als eine einzelne Zeichenfolge anzuhängen, als mehrere Elemente nacheinander anzuhängen. Sie müssen Ihren Code überarbeiten, um eine einzelne HTML-Zeichenfolge zu erstellen und am Ende einmal anzuhängen.

z.B.

$.getJSON(url, function(data) { 
    var html = ""; 
    $.each(data, function(n, newData) { 
     html += 
     "<li class='my-li-class'>" + 
     "<div class='imageclass'><img src='"+newData.img+"' class='innerimageclass'></div>" + 
     "<div class='another-inner-div'>" + 
     "<div class='main-title'>"+newData.title+"</div>" + 
     "</div>" + 
     "</li>"); 
    }); 
    $(".content").append(html); 
}); 

oder .html()

$(".content").html(html); 

Wie in Kommentar bemerkt verwenden, ein DIV ist kein gültiges Kind eines UL, so dass Sie die UL stattdessen zum Ziel benötigen:

$(".content").parent().append(html); 

Or fügen Sie dem UL stattdessen eine Klasse hinzu und richten Sie diese direkt aus.