jquery - 为数组的每个元素创建 <li>

Question

我不确定我的尝试是否正确。我得到了这个 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'));

就是这个 HTML 代码

<main></main>

当我加载页面时，我的 JS 会生成其余部分，HTML 代码现在将如下所示

<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>

你有一把 fiddle https://jsfiddle.net/tanaan/24kzwmz0/

首先，我不确定我是否有变量 tagsProject被视为数组。我想是的，但不是 100% 确定。

我想将每个标签添加到 <li> 中嵌套在 <ul class="tags">对于每个元素并获取最终的 HTML 代码

<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>

我已经尝试过在 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);
});

但它只添加了一个<li>仅使用第一个字母加不能组成 <href>

你可以在这里看到它https://jsfiddle.net/tanaan/24kzwmz0/1/

任何帮助将不胜感激，我有点迷失了。

非常感谢

Answer 1

您的代码存在几个问题:

1. cList.append(item) 产生错误:item 未定义。
2. 访问 e.tagsProject[i] 会将 e.tagsProject 视为字符数组，递增 main[] 中每个项目所访问的字母。

---

删除cList.append(item)会产生上述行为。但是您可以通过简单地使用 e.tagsProject 作为字符串文字而不是数组来解决这个问题。

请参阅updated jsFiddle或下面的代码片段:

var main = [{
 title:'Title 1',
 tagsProject: ('tag1', 'tag2'),
 content: 'Content1'
},{
 title:'Title 2',
 tagsProject: ('tag5', 'tag6', 'tag1'),
 content: 'Content2'
},{
 title:'Title 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'));

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

    //cList.append(item);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main></main>