同位素在前3项中添加一个类(onload,filtered)

时间:2015-02-12 06:04:55

标签: jquery-isotope

我正在尝试在布局最初加载时以及每次根据所选过滤器更改时向前3个项目添加类。

$container.isotope( 'on', 'layoutComplete',
    function( isoInstance, laidOutItems ) {

        // no results
        if ( !laidOutItems.length ) {
            $('.message').fadeIn('slow');
        } else {
            $('.message').fadeOut('fast');
        }

        // add popular class to first 3 items
        $('.item').find('.well').removeClass('popular');
        $('.item:lt(3)').find('.well').addClass('popular');
    }
);

以上仅影响页面上硬编码的项目。我无法从布局中的所有项目中删除该类,然后将其添加到前3个过滤项目中。

1 个答案:

答案 0 :(得分:0)

您可以使用类来定位隐藏元素和可见元素。首先,您将为过滤后的元素添加和删除隐藏类,如下所示:

var itemReveal = Isotope.Item.prototype.reveal;
Isotope.Item.prototype.reveal = function() {
  itemReveal.apply( this, arguments );
  $( this.element ).removeClass('isotope-hidden');
};

var itemHide = Isotope.Item.prototype.hide;
Isotope.Item.prototype.hide = function() {
  itemHide.apply( this, arguments );
  $( this.element ).addClass('isotope-hidden');
};

一旦您知道哪些内容可见且不可见,您就可以:lt(3)').使用可见项