複数のクラスを持つリストをjQueryに追加する正しい構文は何ですか？

Question

liに複数のクラスを持つクラスにliを追加しようとしています。

だから私のHTMLコードは次のとおりです。

<div class="maincontent"> 
    <ul> 

    <div class="content"> 

    <div> 

    </ul> 
</div> 

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

私はJSONからデータを読んでいます。 jsonデータは正常です。私は1つの追加だけを使用し、その中にコード全体を追加すると、データを正しく表示できます。しかし、コードは非常に悪く見えます。ですから、私は見栄えの良いように各行に分割したいと思います。イムは何か間違っていると付け加える。助けてください。

ありがとうございました。

Answer 1

追加する<li>は、HTML文字列を追加しません。新しい要素を追加して開き、閉じます。だからあなたのdivはリスト項目の中にはありません。我々は要素を追加するとき、我々はあなたのコードをチェックするので、もし、それがDOMツリーに追加されます、

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

時間を

$.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

：あなただけ.append()それをすべて一度に全体HTMLの木を、持っているので、あなたは

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

をしたHTMLを

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

に変更しました3210

次のappendは内部李

が起こっていることはありません、あなたがそれを行うことができます複数の方法、

は、変数を作成し、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>"); 

またはあなたは本当にそれが本当にきれいにしたい場合は、div.contentに追加し、個別に、最終的に作成された各要素にのcreateElementや関連機能を使用しています。

Answer 3

注意：複数のアイテムを1つの文字列として追加する方が、が大幅により速く、複数のアイテムを1つずつ追加するよりも高速です。単一のHTML文字列を作成して最後に追加するには、コードを書き直す必要があります。

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

または：あなたの代わりにULをターゲットにする必要があるので、

$.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); 
}); 

やコメントで述べたように.html()

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

を使用し、DIVは、ULの有効な子ではありません代わりにULにクラスを追加し、それを直接ターゲティングします。