jQuery DOM建築物縮進

這是我第二天學習jQuery，我很喜歡它（它讓我想起LISP），但是我有一個關於格式化某種方法的問題（或者可能使用我不知道的函數）。我有我的文檔稱爲對象的數組，並使用下面的代碼，我目前正在建設一個表：jQuery DOM建築物縮進

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>的每一個和<div>（而不是僅僅一個燎元素<tr>）。我找不出一個好的方法來編寫代碼，以便它與HTML縮進相匹配，而不會讓JavaScript難以閱讀。

本來我遇到過這個問題，因爲我想看看jQuery.ui手風琴看起來如何。我意識到我可以將<h3>和<div>包裝在外部<div>中，並使用手風琴的:header屬性，但我很好奇人們想出什麼答案。

來源

2011-11-14 WuHoUnited

這個怎麼樣？

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];

我不會使用$前綴。

希望幫助...

來源

2011-11-14 04:44:20 Homer6

的例子可以發現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');

來源

2011-11-14 04:47:05 steveyang

jQuery DOM建築物縮進

回答

相關問題