Question

我正在尝试使用随机网格大小的API创建动态网格。我可能不会问这个问题（因此我找不到我需要的东西）但我需要的是能够'标记'数组同样。这是场景;数组长度为10。

HP

我想附加对象以添加名为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。

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

期望的结果：

col-4

功能：

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

欢迎插件建议。

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是否为真。

编辑：添加了最后一个元素要求。我在第一次阅读时错过了。我道歉。

在'x'，'y'，'z'迭代上追加数组

1 个答案: