Jquery 如何通过ajax更新同位素2项目，同时保持当前的排序和筛选？

我正在使用同位素构建一个卡片仪表板。卡的数据通过控制器动作（MVC 5部分视图）动态生成：

卡片和砖石布局正确显示，一切正常。当我通过ajax更新卡时，问题就出现了：

setInterval(function () {
    $.get('@Url.Action("GetCards")', function (data) {
        var $item = $('.card');
        $isogrid.isotope('remove', $item);

        $isogrid.append(data)
            .isotope('appended', data)
            .isotope('reloadItems').isotope('layout');
    });
}, 5000);

但这样做会使网格失去布局：所有卡片都堆叠在左上角，过滤和排序设置也会丢失

---

理想情况下，我应该只更新修改过的卡，而不是移除并重新插入它们。大多数时候都会收到相同的卡片（带有更新的信息），但有时（很少）会从列表中删除一些卡片和/或插入新的卡片。有人知道实现这一点的方法吗？

我的另一个问题没有得到答案，因此我必须不断尝试和搜索，直到找到解决方案。这个很具体，我会告诉你的

无论如何，同位素的方法

附加了

和

前置了

，在插入项目后很难适当地设置布局。另外，通过

$isogrid.append/prepend

添加项目现在似乎有点失败，所以我通过jquery将项目添加到DOM中，然后将它们插入同位素中，一切都恢复正常：

setInterval(function () {
    $.get('@Url.Action("GetCards")', function (data) {
        var $item = $('.card');
        $isogrid.isotope('remove', $item);
        $('#cards').html('').append(data);
        $isogrid.isotope('insert', $('.card'));
    });
}, 5000);

---

我仍然找不到一种简单的方法来更新现有卡，而不是替换所有卡，所以我会再等几天再接受这个答案。

我也有同样的问题，运气好吗？请检查我下面的答案。太好了，你能在V2中切换所有项目的大小吗？或者这已经不存在了<代码>$（“#切换大小”）。查找（'a'）。单击（函数（）{$container.toggleClass（'variable-size'）。同位素（'reLayout'）；返回false；}）在链接的Etc部分页面下。你能在这个网站上贴一把小提琴吗

var $isogrid = $('#cards').isotope({
    itemSelector: '.card',
    masonry: {
        columnWidth: 7 // does anyone knows how this works, I can't understand it. :P
    },
    getSortData: {
        region: '.title',
        errors: '[data-errors]',
        warnings: '[data-warnings]'
    },
    sortBy: ['errors', 'warnings', 'region'],
    sortAscending: { errors: false, warnings: false, region: true }
});

setInterval(function () {
    $.get('@Url.Action("GetCards")', function (data) {
        var $item = $('.card');
        $isogrid.isotope('remove', $item);

        $isogrid.append(data)
            .isotope('appended', data)
            .isotope('reloadItems').isotope('layout');
    });
}, 5000);

setInterval(function () {
    $.get('@Url.Action("GetCards")', function (data) {
        var $item = $('.card');
        $isogrid.isotope('remove', $item);
        $('#cards').html('').append(data);
        $isogrid.isotope('insert', $('.card'));
    });
}, 5000);