Question

我以这种方式使用jQuery isotope插件呈现了一个页面：

var $container = $('.mydiv'),

        colWidth = function () {
            var w = $container.width(), 
                columnNum = 1,
                columnWidth = 0;
            if (w > 800) {
                columnNum  = 3;
            } else if (w > 600) {
                columnNum  = 2;
            } else if (w > 350) {
                columnNum  = 2;
            } else if (w > 250) {
                columnNum  = 1;
            }
            columnWidth = Math.floor(w/columnNum);
            $container.find('.element-item').each(function() {
                var $item = $(this),
                    multiplier_w = $item.attr('class').match(/item-w(\d)/)


                $item.css({

                    'margin-bottom': '30px'

                });
            });
            return columnWidth;
        },
        isotope = function () {
            $container.isotope({
                    animationEngine : 'jquery',
                resizable: false,
                transformsEnabled: false,
                transitionDuration: animationspeed,
                itemSelector: '.element-item',
                masonry: {
                    columnWidth: colWidth(),
                    gutterWidth: 5
                },
                    getSortData: {
      name: '.name',
      cashable: '.cash',
      number: '.number parseFloat',
      wr: '.wr parseFloat',
      bonus: '.bonus parseFloat',
      category: '[data-category]',
      country: '[data-country]',
      filter: '[data-filter]',
      weight: function( itemElem ) {
        var weight = $( itemElem ).find('.weight').text();
        return parseFloat( weight.replace( /[\(\)]/g, '') );
      }

    }


            }).css({'text-align':'center'});


        };


    isotope();
    $(window).resize(isotope);

现在，我想在选择组上使用ajax调用过滤容器“mydiv”：

<select class="form-control input-sm" id="filters-select" data-filter-group="group-three"><option value="">All</option><option value=".option-one">Option One</option><option value=".option-two">Option Two</option><option value=".option-three">Option Three</option></select>

我用这种方式调用ajax：

$('#filters-select').change(function(){

            var getQuery = 'http://www.example.com/my-list/search-results/?cat8';
            getQuery += '&opt='+this.value.split('.').join("");


            $.ajax({
                url: getQuery,
                success: function(newElementsAjax){$container.isotope('insert', newElementsAjax); isotope();}
                });
            });

Ajax获得成功但容器未更新，过滤，排序......

我的错在哪儿？

感谢所有人！

Answer 1

您正在使用$container.isotope('insert', newElementsAjax);插入新项目。

如果您想要过滤当前的结果集，则不需要进行ajax调用。

只需致电：

$container.isotope({ filter: '.yourFilterClassName' })

Isotope会自动删除并过滤结果集（不需要ajax）。

在您的情况下，您可以尝试：

$('#filters-select').change(function(){
    var value = $(this).val();

    $container.isotope({ filter: value })
});

Answer 2

试试这个

在你的ajax成功函数之后把它放到

$container.isotope('reloadItems');                      
setTimeout(function () { $container.isotope('layout') }, 500);

希望有所帮助。

jQuery Isotope - 无法使用ajax获得同位素

2 个答案: