需要一個更好的解決方案，以追加從JavaScript文件

Question

for (i = 0; i < events.length; i++) { 
    left_pos = (event_col[i] * xfactor * 100); 
     //jquery part need cleaner 
    $('.contain_textDiv') 
     .append('<div class="sample_box1" style="margin-left:' + left_pos + '%;' + 'margin-top:' + Math.round(events[i].start) + 'px; width:' + Math.floor(95 * xfactor) + '%;' + 'position: absolute; height:' + Math.round(events[i].end - events[i].start) + 'px;"><div class="sample_boxHeader">Sample Layout</div><div class="sample_box_grayText">Sample Location</div></div>'); 
    } 

的JavaScript代碼，這部分將通過循環來改變目前的HTML樣式並添加

<div class="sample"></div> 

和

<div class="sample2"></div> 

裏面的html我的HTML文件，已經存在一個<div class="sample"></div>

任何人都有更好的解決方案來清理代碼的一部分？我將衷心感謝您的幫助！

Answer 1

而是附加的DOM元素作爲一個字符串，創建jQuery的一個新的元素和追加一條：

var newEl = $('<div>').addClass("sample_box1").css({ 
    'margin-left': left_pos+"%", 
    'margin-top': Math.round(events[i].start), 
    width: Math.floor(95 * xfactor)+'%', 
    //etc etc 
}); 
$('.contain_textDiv').append(newEl); 

Answer 2

我認爲布倫南的回答是一種很好的清潔方法。但是，如果由於某種原因，你喜歡建立它作爲一個字符串，那麼這裏有一個小的例子「使用像一個StringBuilder陣列」砍我喜歡用不時：

for (i = 0; i < events.length; i++) { 
    left_pos = (event_col[i] * xfactor * 100); 
    var sb = []; 
    sb.push('<div class="sample_box1" '); 
    sb.push( 'style="margin-left:' + left_pos + '%;'); 
    sb.push( 'margin-top:' + Math.round(events[i].start) + 'px; '); 
    sb.push( 'width:' + Math.floor(95 * xfactor) + '%;'); 
    sb.push( 'position: absolute; '); 
    sb.push( 'height:' + Math.round(events[i].end - events[i].start) + 'px;">'); 
    sb.push('<div class="sample_boxHeader">Sample Layout</div>'); 
    sb.push('<div class="sample_box_grayText">Sample Location</div>'); 
    sb.push('</div>'); 
    console.log(sb.join('')); 
    $('.contain_textDiv').append(sb.join('')); 
} 

Answer 3

有幾種方法清理這個。一種方法是縮進你的代碼。你可以做的另一件事是使用jQuery的方法來設置樣式屬性值（所以你不必擔心逃逸和不能）。

$('.contain_textDiv') 
    .append(
    $('<div>') 
     .addClass('sample_box1') 
     .css({ 
     'margin-left': left_post + '%', 
     'margin-top': Math.round(events[i].start) + 'px', 
     width: Math.floor(95 * xfactor) + '%', 
     height: Math.round(events[i].end - events[i].start) + 'px' 
     }) 
     .append([ 
     $('<div class="sample_boxHeader">Sample Layout</div>'), 
     $('<div class="sample_box_grayText">Sample Location</div>') 
     ]) 
) 

（代碼是未經測試，但應該讓你開始。）

另一個要考慮的（通常是最好的選擇）是使用JavaScript模板引擎。有很多可供選擇的。我發現Swig是非常高效和輕量級的，當您只有基本的模板需求時，這很好。