在循环内连接 html 标签答案

【问题标题】：Concat html tags inside a loop在循环内连接 html 标签
【发布时间】：2020-01-05 11:46:01
【问题描述】：

我坚持连接字符串以在数组循环内将其打印为html。它只打印类group 的div 内的第一个anchor 标签。我应该修改什么来打印group div 内的锚点？示例如下：

var data = [{
        "id": 1969,
        "first_release_date": 1083542400,
        "name": "Item 1"
    },
    {
        "id": 25076,
        "first_release_date": 1083542400,
        "name": "Item 2"
    },
    {
        "id": 25076,
        "first_release_date": 1540512000,
        "name": "Item 3"
    },
    {
        "id": 25076,
        "first_release_date": 1540512000,
        "name": "Item 4"
    },
    {
        "id": 25076,
        "first_release_date": 1540512000,
        "name": "Item 5"
    },
    {
        "id": 25076,
        "first_release_date": 1540512000,
        "name": "Item 6"
    },
    {
        "id": 9245,
        "first_release_date": 1292976000,
        "name": "Item 7"
    },
    {
        "id": 9245,
        "first_release_date": 1292976000,
        "name": "Item 8"
    },
    
    {
        "id": 9245,
        "first_release_date": 1566950400,
        "name": "Item 9"
    }
];

var tag = "",
    release = "",
    releaseChecker = 0;

Object.keys(data).forEach(function(key) {
    if (data[key].first_release_date != releaseChecker) {
        release = new Date(data[key].first_release_date * 1000);
        tag += '<h4>' + release.getDate() + '</h4>';
    }

    if (data[key].first_release_date != releaseChecker) {
        tag += '<div class="group">';
    }

    tag += '<a class="test" href="#">'+data[key].name+'</a>, ';

    if (data[key].first_release_date != releaseChecker) {
        tag += '</div>';
    }
    releaseChecker = data[key].first_release_date;
});
$(".el").html(tag);

.group {
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="el"></div>

【问题讨论】：

您需要另一个内部循环来创建a 元素。但是，我看不出这段代码如何匹配你说你得到的输出，因为它每次迭代只产生一个 a 包裹在 div 中。
还应提供数据样本，以便我们重现问题。单击问题编辑器中的<> 使其成为可运行的sn-p
另外，如果你真的想在输出中换行和缩进，你需要像'...</h4>\n'和tag += ' <a...'这样的改变。
@charlietfl 我已经用 sn-p 示例更新了代码。

标签： javascript jquery arrays loops

【解决方案1】：

Object.keys() 用于object 但data 是此处的数组。它可能会起作用但可能会导致一些意外行为。

不使用Object.keys()，首先您可以创建另一个包含分组数据的数组，然后对其进行迭代。

这是一个有效的 sn-p：

更新说明：您可以使用map 和join 来添加逗号，而不是最后硬编码,。

var data = [{
        "id": 1969,
        "first_release_date": 1083542400,
        "name": "Item 1"
    },
    {
        "id": 25076,
        "first_release_date": 1083542400,
        "name": "Item 2"
    },
    {
        "id": 25076,
        "first_release_date": 1540512000,
        "name": "Item 3"
    },
    {
        "id": 25076,
        "first_release_date": 1540512000,
        "name": "Item 4"
    },
    {
        "id": 25076,
        "first_release_date": 1540512000,
        "name": "Item 5"
    },
    {
        "id": 25076,
        "first_release_date": 1540512000,
        "name": "Item 6"
    },
    {
        "id": 9245,
        "first_release_date": 1292976000,
        "name": "Item 7"
    },
    {
        "id": 9245,
        "first_release_date": 1292976000,
        "name": "Item 8"
    },
    
    {
        "id": 9245,
        "first_release_date": 1566950400,
        "name": "Item 9"
    }
];


    var tag = "",
    release = "",
    releaseChecker = 0,
    groupedData = [];

   data.forEach(function(item) {
        release = new Date(item.first_release_date * 1000);
        if(!groupedData.find(d => d.releaseDate === release.getDate())){
           groupedData.push({releaseDate: release.getDate(), items: []});
        }
        
        groupedData.find(d => d.releaseDate === release.getDate()).items.push(item);
       
    
  });
 groupedData.forEach(function(data){
 
    tag += '<h4>' + data.releaseDate + '</h4>';
    tag += '<div class="group">';
    
    tag += data.items.map(function(item){
       return '<a class="test" href="#">'+item.name+'</a>';
    }).join(', ');
    
    tag += '</div>';
 
 });
 
 $(".el").html(tag);

.group {
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="el"></div>

希望这会有所帮助。

【讨论】：

【解决方案2】：

你在关闭 div 点时遇到了问题，

if (data[key].first_release_date != releaseChecker) {
        tag += '</div>';
    }

这在第一次迭代时执行，为防止这种情况添加零检查

if (releaseChecker != 0 && data[key].first_release_date != releaseChecker) {
        tag += '</div>';
    }

你需要将它移动到循环的开始以停止在 div 中包含下一个标题

var data = [{
        "id": 1969,
        "first_release_date": 1083542400,
        "name": "Item 1"
    },
    {
        "id": 25076,
        "first_release_date": 1083542400,
        "name": "Item 2"
    },
    {
        "id": 25076,
        "first_release_date": 1540512000,
        "name": "Item 3"
    },
    {
        "id": 25076,
        "first_release_date": 1540512000,
        "name": "Item 4"
    },
    {
        "id": 25076,
        "first_release_date": 1540512000,
        "name": "Item 5"
    },
    {
        "id": 25076,
        "first_release_date": 1540512000,
        "name": "Item 6"
    },
    {
        "id": 9245,
        "first_release_date": 1292976000,
        "name": "Item 7"
    },
    {
        "id": 9245,
        "first_release_date": 1292976000,
        "name": "Item 8"
    },
    
    {
        "id": 9245,
        "first_release_date": 1566950400,
        "name": "Item 9"
    }
];

var tag = "",
    release = "",
    releaseChecker = 0;

Object.keys(data).forEach(function(key) {
    if (releaseChecker != 0 && data[key].first_release_date != releaseChecker) {
        tag += '</div>';
    }
    if (data[key].first_release_date != releaseChecker) {
        release = new Date(data[key].first_release_date * 1000);
        tag += '<h4>' + release.getDate() + '</h4>';
        tag += '<div class="group">';
    }

    tag += '<a class="test" href="#">'+data[key].name+'</a>, ';

    releaseChecker = data[key].first_release_date;
});
$(".el").html(tag);

.group {
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="el"></div>

【讨论】：

虽然代码可能会解决问题，但请始终解释发生了什么变化以及为什么人们不必寻找差异
Object.keys() 不能和Object 一起使用吗？
数组在 JavaScript 中被认为是对象，所以我认为可以将 Object.keys() 与将返回索引数组的数组一起使用
您是对的，但是获取密钥然后使用它访问而不是仅使用 forEach 并获取值不是多余的吗？我认为问题与索引无关。

【解决方案3】：

这应该可行。

var tag = "",
    release = "",
    releaseChecker = 0, 
    linkGroup = '';
var linkContainer = '';


Object.keys(data).forEach(function(key) {

    if (data[key].first_release_date != releaseChecker) {
        release = new Date(data[key].first_release_date * 1000);
        tag += '<h4>' + release.getDate() + '</h4>';
        linkContainer = '<div class="group">#linkGroup</div>';
    }


    linkGroup += '<a class="test" href="#">'+data[key].name+'</a>, ';

    if (data[key].first_release_date != releaseChecker) {
        tag += linkContainer.replace(/\#linkGroup/g, linkGroup);
    }


    releaseChecker = data[key].first_release_date;
});
$(".el").html(tag);

演示 https://jsbin.com/coduvobaqi/edit?html,js,output

【讨论】：