GridStack JS设置网格框的顺序

Question

我正在尝试使用gridstack.js存储页面上显示的框的顺序

目前，它们在HTML中显示的顺序，而不是它们在页面上的布局。下面是一张图片，进一步解释我正在尝试做的事情：

​

​

我用来设置它们顺序的代码如下：

$gridStack.on('change', gridStackItemOnChange);  


function gridStackItemOnChange(e, items)
{
    var index = 0;

    for(i in items) {
        var el = $(items[i].el);
        el.data('index', index);

        console.log('view:', el.data('view'), ' index:', index);

        index++;
    }
}

控制台输出输出打印以下内容

view: about_me  index: 0
view: blank  index: 1
view: youtube  index: 2
view: comments  index: 3

它看起来只是随机的顺序，而不是从左到右

有什么办法可以解决这个问题吗？

Answer 1

通常不能保证for... in循环的迭代顺序。有关详细信息，请参阅this answer。

试试这个：

items.forEach(function(e, i) {
    var el = $(e.el);
    el.data('index', i);

    console.log('view:', el.data('view'), ' index:', i);
})