需要一个更好的解决方案，以追加从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是非常高效和轻量级的，当您只有基本的模板需求时，这很好。