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>

你有一个小提琴https://jsfiddle.net/tanaan/24kzwmz0/

首先，我不确定变量tagsProject的方式是否被视为数组。我想是的，但不是百分百肯定。

我想在每个元素的<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

您的代码存在一些问题：

cList.append(item)产生错误：item is not defined。
访问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>

Answer 2

不需要两个循环each()，因为您可以在第一个循环中获得所需的所有数据。

希望这有帮助。

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'
}];
var container = $('<div />', {class:'container'});

$.each(main, function(i, e){
  var cList = $('<ul class="tags"/>');
  
  e.tagsProject.map(function(tag){ 
    var link = $('<a/>').text(tag).prop('href', tag); 
    $('<li/>').append(link).appendTo(cList);
  });

  var item = $('<div />', {
    class:'item',
    html:'<div><h2>' + e.title + '</h2></div>' +
    '<div class="content"><p>' + e.content + '</p></div></div>'
  });
  
  item.find('.content').append(cList);
  container.append(item);
});

container.appendTo($('main'));

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

Answer 3

@ BenM的答案有效，尽管我从问题中理解的是如何为每个标签创建元素，而不是所有标签。这是为你做的，我使用map将每个标记转换为HTML字符串，然后将它们连接起来并创建一个要追加的元素。

当然，您可能想要清理代码。

更新了小提琴：https://jsfiddle.net/24kzwmz0/4/

为数组

3 个答案: