用于创建此结构,我只想使用underscore.js方法。我的数组以下。
var xyz = [{
'name': 'test'
},{
'name': 'test1'
},{
'name': 'test2'
},{
'name': 'test3'
},{
'name': 'test4'
},{
'name': 'test5'
}];
和HTML结构应像这样创建 -
<ul>
<li>
<div><span>test3</span></div>
<div><span>test4</span></div>
<div><span>test5</span></div>
</li>
<li>
<div><span>test6</span></div>
<div><span>test7</span></div>
<div><span>test8</span></div>
</li>
</ul>
我在项目上使用react和underscore.js。
一个纯react函数的示例(也可能是组件),您可以执行以下操作:
<span>
{_.map(_.chunk(xyz, 3), (innerItem, i) => (
<ul key={i}>
{_.map(innerItem, ({name}, j) => (<li key={j}>{name}</li>))}
</ul>
))}
</span>
尝试以下:
$(document).ready(function(){
var xyz = [{'name':'test'},{'name':'test1'},{'name':'test2'},{'name':'test3'},{'name':'test4'},{'name':'test5'}];
var htmlStr = "<ul><li>";
var cnt = 0;
$(xyz).each(function(i,v) {
if(cnt != 0 && cnt % 3 == 0) {
htmlStr += "</li><li>";
}
htmlStr += "<div><span>"+v.name+"</span></div>";
cnt++;
});
htmlStr += "</li></ul>";
$("#test").html(htmlStr)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="test"></div>
您可以将数组分为块,并使用下划线_.template方法来创建HTML:
var xyz = [{
'name': 'test'
},{
'name': 'test1'
},{
'name': 'test2'
},{
'name': 'test3'
},{
'name': 'test4'
},{
'name': 'test5'
}];
var chunkedXyz = _.chain(xyz).groupBy(function(element, index){
return Math.floor(index/3);
}).toArray().value();
var liTemplate = _.template("<% _.each(liElements, function(liContent) { %> <div><span><%= liContent.name %></span></div> <% }); %>");
var ulTemplate = _.template("<% _.each(chunkedXyz, function(liItem) { %> <li><%= liTemplate({liElements: liItem}) %></li> <% }); %>");
var layout = "<ul>" + ulTemplate({
chunkedXyz: chunkedXyz,
liTemplate: liTemplate
}) + "</ul>";
console.log(layout.toString());
https://jsfiddle.net/1m5ayhzw/