[英]Ext way to create DOM elements, or minimalist alternative to jQuery?
[英]JS or jQuery way to dynamically create DOM elements
谁能指出我这样做的一种更易于阅读和扩展的方式:
data = {/*very very long json*/};
var inHTML = "";
jQuery.each(data, function(key, value){
var articleUrl = 'url-to-somewhere';
var newItem = "<div class='item'><div class='item--poster'><img src='"+data[key].backdropUrl+"' alt='title'/></div><div class='item--content'><h2>"+data[key].title+"</h2><ul><li>"+data[key].productionYear+"</li><li>"+data[key].productionCountry+"</li></ul></div><div class='item--link'><p><a class='' href='"+articleUrl+"'>Lue lisää</a></p></div></div>";
inHTML += newItem;
});
jQuery("#container").html(inHTML);
我正在寻找类似于Angular的ng-repeat的东西。
我敢打赌使用占位符模板和.clone()
。 您真正需要做的是创建一个像这样的主DOM:
<div id="master-dom" class="item">
<p><strong>Name</strong> <span class="Name"></span></p>
<p><strong>Age</strong> <span class="Age"></span></p>
</div>
现在提供一个隐藏主DOM的CSS:
#master-dom {display: none;}
下一个尝试将是#content
区域:
<div id="content"></div>
现在是JavaScript部分。
var data = [
{
"name": "Praveen",
"age": 27
},
{
"name": "Jon Skeet",
"age": 29
},
{
"name": "Kumar",
"age": 25
}
];
将以上内容作为数据结构,您可以循环并插入:
$.each(data, function (i, v) {
// We need the v.
$("#master-dom").clone()
.removeAttr("id")
.find(".Name").text(v.name).end()
.find(".Age").text(v.age).end()
.appendTo("#content");
});
在此处查看最终输出:
$(function() { var data = [{ "name": "Praveen", "age": 27 }, { "name": "Jon Skeet", "age": 29 }, { "name": "Kumar", "age": 25 }]; $.each(data, function(i, v) { // We need the v. $("#master-dom").clone() .removeAttr("id") .find(".Name").text(v.name).end() .find(".Age").text(v.age).end() .appendTo("#content"); }); });
* { margin: 0; padding: 0; list-style: none; } #master-dom { display: none; } .item p strong { display: inline-block; width: 75px; }
<script src="https://code.jquery.com/jquery-2.1.4.js"></script> <div id="master-dom" class="item"> <p><strong>Name</strong> <span class="Name"></span></p> <p><strong>Age</strong> <span class="Age"></span></p> </div> <div id="content"></div>
我真的相信这将是Angular ng-repeat
背后的基本逻辑。 如果我在您的位置,我也将使用上述逻辑。
您可以使用ES6功能模板文字
您的字符串看起来像这样
var newItem =
`<div class='item'>
<div class='item--poster'>
<img src='${data[key].backdropUrl}' alt='title'/>
</div>
<div class='item--content'>
<h2>${data[key].title}</h2>
<ul>
<li>${data[key].productionYear}</li>
<li>${data[key].productionCountry}</li>
</ul>
</div>
<div class='item--link'>
<p>
<a class='' href='${articleUrl}'>Lue lisää</a>
</p>
</div>
</div>`;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.