Question

我如何才能正确输入一个对象数组中的数字，只进入一次html内容？

理想情况下，我希望在"category"类的最后一个跨度之后输入对象的.viewed数字。最终结果将遵循......

的内容

约瑟夫迈克尔斯和另外3人已经看过这篇文章。＃4

JSON文件的一个示例：

{
  "profiles": [
    { "firstName" : "John", "lastName" : "Doe", "gender": "male", "category": 2 },
    { "firstName" : "Jane", "lastName" : "Austen", "gender": "female", "category": 2 },
    { "firstName" : "Alexander", "lastName" : "Beth", "gender": "male", "category": 3 },
    { "firstName" : "Sarah", "lastName" : "Kelly", "gender": "female", "category": 3 },
    { "firstName" : "Rachel", "lastName" : "Haiworth", "gender": "female", "category": 3 },
    { "firstName" : "Thomas", "lastName" : "Alfae", "gender": "male", "category": 3 },
    { "firstName" : "Roy", "lastName" : "Harper", "gender": "male", "category": 4 },
    { "firstName" : "Joseph", "lastName" : "Michaels", "gender": "male", "category": 4 },
    { "firstName" : "William", "lastName" : "Lee", "gender": "male", "category": 4 }
  ]
}

JS文件的一部分：

if (obj.category == 4) {
    $('.contentBox:nth-child(4) .viewed').append('<span class="user">' + obj.firstName + ' ' + obj.lastName + '</span>' + ' ');
    $('.contentBox:nth-child(4) .viewed span:last-child').append('<span class="categoryNumber">' + obj.category + '</span>');

    //$('.contentBox:nth-child(4) .viewed').append('<span class="categoryNumber">' + obj.category + '</span>');
}

目前，代码正在多行输入<span class="categoryNumber"></span>一行。因此，类别编号显示倍数。

这种情况的最佳解决方案是什么？

查看当前的Plunker。

Answer 1

要停止输出多次，您只需检查是否已输出标记：

if( ! $('.contentBox .categoryNumber').length){
    $('.contentBox:nth-child(4) .viewed span:last-child').append('<span class="categoryNumber">' + obj.category + '</span>');
}

这只是一个快速解决方案，但我会考虑在输出html之前更多地组织数据。根据类别将数据组织成一个多维数组，在每个数组中首先获取前面名称，并在每个类别数组上执行.length将以更优雅的方式生成所需的标记字符串，并且在很多方面更少的代码。

此外，由于您在每次迭代中迭代并输出标记的方式，上述选择器将输出错误的位置，如上所述重构将消除此问题！：）

Answer 2

我认为你没有正确地接近这个问题。您不希望将对象的类别编号附加到范围 - 您要查看.contentBox div的索引。您可以通过＆＃39; .each（）＆＃39;来访问它。 JQuery API的方法。

您可以遍历内容框，将其索引添加到要修改的范围。

例如，您可以将此添加到checkViewers函数：

$('.viewed').each(function(index){
  $(this).last().append(' #' + index);
});

顺便说一句......您可以通过将 for 循环替换为：

来大大简化代码。

responseObject.profiles.forEach(function(obj){
    $('.contentBox:nth-child(' + obj.category + ') .viewed').append('<span class="user">' + obj.firstName + ' ' + obj.lastName + '</span>' + ' ');
});

（如果您复制并粘贴到IDE中，您将更容易理解）

希望它有所帮助;}

附加JSON对象编号 - 故障排除

2 个答案: