同位素为前 3 个项目添加一个类别（加载、过滤）答案

【问题标题】：Isotope adding a class to first 3 items (onload, filtered)同位素为前 3 个项目添加一个类别（加载、过滤）
【发布时间】：2015-02-12 06:04:55
【问题描述】：

我正在尝试在布局最初加载时为前 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 个过滤项目中。

【问题讨论】：

标签： jquery-isotope

【解决方案1】：

您可以使用它们的类来定位隐藏元素和可见元素。因此，首先您将为过滤的元素添加和删除隐藏类，如下所示：

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)').

【讨论】：