创建HTML模板以使用JQuery追加

时间:2018-01-29 16:59:07

标签: javascript jquery html

我有div标记,我想多次附加模板。每个模板都包含不同的数据。

这是我到目前为止所拥有的

HTML

<div id="vContainer">
</div>

JS

var vRow = $('<div></div>')
   .addClass('row')
   .addClass("vRow");

var vTitle = $('<div></div>')
    .addClass('col-md-4')
    .addClass('col-xs-12');

var vPercentage = $('<div></div>')
    .addClass('col-md-2')
    .addClass('col-xs-12');

var vProgressContainer = $('<div></div>')
    .addClass('col-md-6')
    .addClass('col-xs-12');

var vProgress = $('<div></div>')
    .addClass("progress");

var vProgressBar = $('<div></div>')
    .addClass('progress-bar')
    .addClass('progress-bar-success')
    .attr("role", "progressbar")
    .attr("aria-valuemin", "0")
    .attr("aria-valuemax", "100");


var newElem = vRow.attr("id", "vRow"+id)
    .append(vTitle.append("<label>"+text+"</label>"))
    .append(vPercentage.attr("id", "vPercentage"+id).append(percentage))
    .append(vProgressContainer
        .append(vProgress
            .append(vProgressBar.attr("id", "vProgressBar"+id)
                .css("width", percentage))));

$("#vContainer").append(newElem);

变量percentage的格式为"xx.xx%"。但是这不起作用。我尝试使用静态数据附加模板,但它不会附加多个模板。

0 个答案:

没有答案