如何创建html结构，每个li只允许3个div元素。 在React + underscore.js中

为了创建这个结构，我想只使用underscore.js方法。 我有下面的数组。

var xyz = [{ 'name': 'test' },{ 'name': 'test1' },{ 'name': 'test2' },{ 'name': 'test3' },{ 'name': 'test4' },{ 'name': 'test5' 

}];

HTML结构应该像这样创建 –

 
 
 
test3
 
test4
 
test5
 
 
 
test6
 
test7
 
test8
 
  

我在我的项目中使用React和underscore.js。

Answer 1

纯React函数（也可能是组件）的示例，您可以执行以下操作：

   {_.map(_.chunk(xyz, 3), (innerItem, i) => ( 
 {_.map(innerItem, ({name}, j) => (
{name}
))} 
 ))}  

Answer 2

试试这个：

 $(document).ready(function(){ var xyz = [{'name':'test'},{'name':'test1'},{'name':'test2'},{'name':'test3'},{'name':'test4'},{'name':'test5'}]; var htmlStr = "
"; var cnt = 0; $(xyz).each(function(i,v) { if(cnt != 0 && cnt % 3 == 0) { htmlStr += "
"; } htmlStr += "
"+v.name+"
"; cnt++; }); htmlStr += "
"; $("#test").html(htmlStr) }); 

Answer 3

您可以将数组拆分为块并使用下划线_.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) { %> 
<%= liContent.name %>
 <% }); %>"); var ulTemplate = _.template("<% _.each(chunkedXyz, function(liItem) { %> 
<%= liTemplate({liElements: liItem}) %>
 <% }); %>"); var layout = "
" + ulTemplate({ chunkedXyz: chunkedXyz, liTemplate: liTemplate }) + "
"; console.log(layout.toString()); 

https://jsfiddle.net/1m5ayhzw/