jQuery DOM Building Indentation

Question

jQueryを学ぶのは2日目ですが、これまでのところ（LISPのことを思い出させますが）何かをフォーマットする方法についての質問があります。 ）。 私はマイドキュメントと呼ばれるオブジェクトの配列を持っていると私は現在、次のコード使用してテーブルを構築しています：

jQ('<table/>').addClass('grid').attr('id', 'myDocumentTable') 
    .append(jQ('<thead/>') 
     .append(createHeaderRow(['Title', 'File', 'Updated By', 'Updated On']))) 
    .append(jQ('<tbody/>') 
     .append(jQ.map(myDocuments, function(myDocument){ 
      return jQ('<tr/>') 
       .on({ 
        mouseover: function(){jQ(this).addClass('rowHighlight');}, 
        mouseout: function(){jQ(this).removeClass('rowHighlight');} 
       .append(jQ('<td/>').text(myDocument.title)) 
       .append(jQ('<td/>') 
        .append(jQ('<a/>').addClass('file-download').attr('href', "fileOpener?id="+myDocument.fileId).text(myDocument.fileName))) 
       .append(jQ('<td/>').text(myDocument.userName)) 
       .append(jQ('<td/>').text(myDocument.updatedOn)) 
       [0]; 
    }))) 

を私は本当にIKEインデントを見れば、それは非常にそれを作る完全にHTMLを模倣しているという事実読みやすい。

<table> 
    <thead> 
     <th></th> 
    </thead> 
    <tbody> 
     <tr> 
      <td> 
       <a /> 
      </td> 
     </tr> 
    <tbody> 
</table> 

今の私は、次の

<div id='myDocumentDiv' 
    <h3>docTitle1</h3> 
    <div>docInfo1</div> 
    <h3>docTitle2</h3> 
    <div>docInfo2</div> 
    <h3>docTitle3</h3> 
    <div>docInfo3</div> 
</div> 

今<h3>を作成するマイドキュメントの各1と<div>（だけではなく焦がす要素<tr>）のような構造を構築したいとしましょう。 JavaScriptを読みにくくすることなく、HTMLインデントに一致するようにコードを書く良い方法を見つけられません。

この問題は、jQuery.uiアコーディオンがどのように見えるかを知りたかったので、私はこの問題に直面しました。 <h3>と<div>を外側の<div>にラップし、アコーディオンの:header属性を使用することができますが、私は人々がとにかく出てくるものに興味があると思います。

Answer 1

これはいかがですか？

var $element = $('<div/>'); 
for(var x = 0; x < 3; x++){ 

    var $header = $('<h3/>'); 
    $header.html('My header ' + x); 

    var $body = $('<div/>'); 
    $body.html('My Body ' + x); 

    $element.append($header); 
    $element.append($body); 

} 

私はDOM要素ではなく、クエリオブジェクトにラップされたDOM要素であることを示すために変数名に$を使用します。

だから私は生の要素を取得した場合：

var dom_element = $element[0]; 

私は$接頭辞を使用することはありません。

Answer 2

例がhereを見つけることができる...お役に立てば幸いです。

jqueryのhtmlを使用すると、すぐにhtml要素のバンドルを作成できます。インデントを保持するには、htmlコードの各行に文字列演算子+を使用します。

$('<div id="myDocumentDiv"' + 
     '<h3>docTitle1</h3>' + 
     '<div>docInfo1</div>' + 
     '<h3>docTitle2</h3>' + 
     '<div>docInfo2</div>' + 
     '<h3>docTitle3</h3>' + 
     '<div>docInfo3</div>' + 
    '</div>') 
.appendTo('#container');