javascript - 在 'x' 、 'y' 、 'z' 迭代上追加数组

Question

我正在尝试从具有随机网格大小的 API 创建动态网格。我可能没有正确地问这个问题(因此为什么我找不到我需要的东西)，但我需要的是能够平等“标记”数组。这是场景；数组长度为 10。

0: { id: 1, title: "First Element" }
1: { id: 3, title: "Second Element" }
2: { id: 5, title: "Third Element" }
3: { id: 7, title: "Forth Element" }
4: { id: 9, title: "Fifth Element" }
5: { id: 11, title: "Sixth Element" }
6: { id: 13, title: "Seventh Element" }
7: { id: 15, title: "Eigth Element" }
8: { id: 17, title: "Nineth Element" }
9: { id: 19, title: "Tenth Element" }

我想附加对象以添加名为 class 的新属性；

我需要 0、1、2、3 为 col-2 和 4 为 col-4 并对其余部分重复相同的操作项目。 5、6、7、8 为 col-2 和 9 为 col-4。

但是同样 - 不能有 1/2 单位后跟全 Angular 单位，并且需要最后一项为全 Angular 。

期望的结果:

0: { id: 1, title: "First Element", class: 'col-2' }
1: { id: 3, title: "Second Element", class: 'col-2'}
2: { id: 5, title: "Third Element", class: 'col-2' }
3: { id: 7, title: "Forth Element", class: 'col-2' }
4: { id: 9, title: "Fifth Element", class: 'col-4' }
5: { id: 11, title: "Sixth Element", class: 'col-2' }
6: { id: 13, title: "Seventh Element", class: 'col-2' }
7: { id: 15, title: "Eigth Element", class: 'col-2' }
8: { id: 17, title: "Nineth Element", class: 'col-2' }
9: { id: 19, title: "Tenth Element", class: 'col-4' }
10: { id: 21, title: "Last Element", class: 'col-4' }

功能:

this.renderContent = function() {
    if (this.retrievedNewsArticles == null || this.retrievedNewsArticles.length == 0) {
        $(contentContainerElement).html('<p class="inline-message">There is currently no data to display.</p>');
    } else {
        // The loop is here
        for (var i = 0; i < this.retrievedNewsArticles.length; i++) {
            this.addUnit(this.retrievedNewsArticles[i]);
        }
    }
};

欢迎提出插件建议。

Answer 1

这应该适合你:

var arr = [
    { id: 1, title: "First Element" },
    { id: 3, title: "Second Element" },
    { id: 5, title: "Third Element" },
    { id: 7, title: "Forth Element" },
    { id: 9, title: "Fifth Element" },
    { id: 11, title: "Sixth Element" },
    { id: 13, title: "Seventh Element" },
    { id: 15, title: "Eigth Element" },
    { id: 17, title: "Nineth Element" },
    { id: 19, title: "Tenth Element" },
    { id: 21, title: "Last Element" }
];

var lastElIndex = arr.length - 1;

var test = arr.map((item, index) => {
    // edit per OP request
    if ( (index + 1) % 5 === 0) {
        item['className'] = 'col-4';
    }
    //if ( (index + 1)  % 5 === 0) {
    //    return { id: item.id, title: item.title, className: "col-4" };
    } else if (index === lastElIndex) {
        return { id: item.id, title: item.title, className: "col-4" };
    } else {
        return { id: item.id, title: item.title, className: "col-2" };
    }
});

我们在这里所做的是迭代数组，并将 className 属性映射到每个项目，具体取决于 (index + 1) mod 5 是否为真。

编辑:添加了最后一个元素要求。我在第一次阅读时错过了这一点。我深表歉意。