Jquery 创建<；李>；对于数组的每个元素

我不确定我所尝试的是否正确。我得到了这个JS代码

var main = [{
 title:'Title 1',
 tagsProject: ('tag1', 'tag2'),
 content: 'Content1'
},{
 title:'Title 2',
 tagsProject: ('tag5', 'tag6', 'tag1'),
 content: 'Content2'
},{
 title:'Title grid 3',
 tagsProject: ('tag4'),
 content: 'Content3'
},

container = $('<div />', {class:'container'});

$.each(main, function(i, e){
 var item = $('<div />', {
   class:'item',
   html:'<div><h2>' + e.title + '</h2></div>' +
   '<div class="content"><p>' + e.content + '</p><ul class="tags"></ul></div></div>'
})

container.append(item);

});

container.appendTo($('main'));

我尝试过在JS的末尾添加这段代码

var cList = $('ul.tags')
$.each(main, function(i, e)
{
    var li = $('<li/>')
        .appendTo(cList);
    var aaa = $('<a/>')
        .text(e.tagsProject[i])
        .appendTo(li);

    cList.append(item);
});

var cList=$（'ul.tags'）
$。每个（主要、功能（即）
{
变量li=$（“
”）
.附录（cList）；
var aaa=$（'

任何帮助都将不胜感激，我有点不知所措

非常感谢
不需要两个循环
每个（）
，因为您可以在第一个循环中获得所需的所有数据

希望这有帮助


var main=[{
标题：“标题1”，
标记项目：['tag1'，'tag2']，
内容：“Content1”
},{
标题：“标题2”，
标记项目：['tag5'、'tag6'、'tag1']，
内容：“Content2”
},{
标题：“标题3”，
tags项目：['tag4']，
内容：“内容3”
}];
var container=$（''，{class:'container'}）；
$。每个（主要、功能（即）{
var cList=$（'ul class=“tags”/>）；
e、 tagsProject.map（函数（标记）{
var link=$（''）.text（tag.prop（'href'，tag）；
$（'
'）.append（link.appendTo（cList）；
});
变量项=$（''{
类别：'item'，
html:“”+e.title+“”+
“”+e.content+”
”
});
item.find（'.content'）.append（cList）；
容器。附加（项目）；
});
container.appendTo（$（'main'）；
您的代码有几个问题：

cList.append（item）
生成错误：
未定义item
访问
e.tagsProject[i]
将
e.tagsProject
视为一个字符数组，递增
main[]中每个项目访问的字母


删除
cList.append（item）
会产生上述行为。但您只需将
e.tagsProject
用作字符串文字，而不是数组，就可以解决此问题

请参阅下面的或代码片段：


var main=[{
标题：“标题1”，
标记项目：（'tag1'，'tag2'），
内容：“Content1”
},{
标题：“标题2”，
标记项目：（“标记5”、“标记6”、“标记1”），
内容：“内容2”
},{
标题：“标题3”，
标记项目：（“标记4”），
内容：“内容3”
}],
容器=$（''，{class:'container'}）；
$。每个（主要、功能（即）{
变量项=$（''{
类别：'item'，
html:“”+e.title+“”+
“”+e.content+”
'
})
容器。附加（项目）；
});
container.appendTo（$（'main'））；
var cList=$（'ul.tags'）
$。每个（主要、功能（即）
{
变量li=$（“
”）
.附录（cList）；
变量aaa=$（''）
.attr（'href'，e.tagsProject）
.文本（如标记项目）
.附件（李）；
//cList.append（项目）；
})；
@BenM的答案是有效的，尽管我从问题中了解到的是如何为每个标记而不是所有标记创建一个元素。这为您做到了，我使用
map
将每个标记转换为HTML字符串，然后将它们合并并创建一个要附加的元素

当然，您可能需要清理代码

更新的提琴：
你好，卡斯拉夫，谢谢你的回答，如果我解释得不够清楚，我很抱歉。我正在查看@BenM发布的内容。我非常感谢你的帮助，但是，如果我需要你分享的内容，知道不同的选项是非常好的。非常感谢。干杯。我已经仔细检查了你的代码，尽管没有这正是我想要的（不是大问题，因为在其他情况下可以重复使用您的方法），我注意到您只是从第一个
标记项目
数组中获取元素，并在每个内容中使用它们，但您忽略了每个项目应使用的其他数组。知道为什么吗？谢谢，我很抱歉，我有点错过了代码中的第一个元素。好的，看起来您为元素循环了两次，这是1:yo你应该在同一个循环中完成，2：如果你仍然决定使用不同的循环，你需要指定你将在每个循环上附加哪个
cList
。而且我不确定为什么所有的
都是重复的，代码有点乱，我没有花太多时间忘记它，伙计。@Zakaria Acharki刚刚点击中奖了！无论如何还是要感谢mil。非常感谢BenM。似乎我非常接近，而且假设我设置
标记项目
变量的方式被视为一个数组也是正确的。我可以包括一个
与标记名具有相同值的
来获得类似
的东西吗？非常感谢你的帮助，你的传奇伙伴。当然，
.attr
 .我真傻！我在尝试
.href（e.tagsProject）
O_O谢谢你，先生！对不起，伙计，我刚刚注意到我们正在获取每个数组的最后一个元素，并在每个项目中重复它们。没有人是对的。内容1应该有tag1，tag2。内容2，tag5，tag6，tag1和内容3，只有tag4。相反，我们在每个内容中都有tag2，tag1和tag4。知道为什么吗？谢谢你可以是b因为，正如我所担心的，tagsProject本身并没有被视为数组，而是一个简单的字符串？代码返回的内容很奇怪，不知道如何解释。）：算了，@Zakaria Acharki的回答做得很好。无论如何，再次感谢Ben。
<main>
 <div class="container">

  <div class ="item">
   <div>
    <h2>Title 1</h2>
   </div>
   <div class="content">
    <p>Content1</p>
    <ul class="tags"></ul>
   </div>
  </div>

  <div class ="item">
   <div>
    <h2>Title 2</h2>
   </div>
   <div class="content">
    <p>Content2</p>
    <ul class="tags"></ul>
   </div>
  </div>

  <div class ="item">
   <div>
    <h2>Title 3</h2>
   </div>
   <div class="content">
    <p>Content3</p>
    <ul class="tags"></ul>
   </div>
  </div>

 </div>
</main>

<main>
 <div class="container">

  <div class ="item">
   <div>
    <h2>Title 1</h2>
   </div>
   <div class="content">
    <p>Content1</p>
    <ul class="tags">
     <li><a href="tag1">tag1</a></li>
     <li><a href="tag2">tag2</a></li>
    </ul>
   </div>
  </div>

  <div class ="item">
   <div>
    <h2>Title 2</h2>
   </div>
   <div class="content">
    <p>Content2</p>
    <ul class="tags">
     <li><a href="tag5">tag5</a></li>
     <li><a href="tag6">tag6</a></li>
     <li><a href="tag1">tag1</a></li>
    </ul>
   </div>
  </div>

  <div class ="item">
   <div>
    <h2>Title 3</h2>
   </div>
   <div class="content">
    <p>Content3</p>
    <ul class="tags">
     <li><a href="tag4">tag4</a></li>
    </ul>
   </div>
  </div>

 </div>
</main>

var cList = $('ul.tags')
$.each(main, function(i, e)
{
    var li = $('<li/>')
        .appendTo(cList);
    var aaa = $('<a/>')
        .text(e.tagsProject[i])
        .appendTo(li);

    cList.append(item);
});