Question

如何在使用isotope2进行排序\过滤后为第一个元素设置一些类？

$( function() {
 var $container = $('.isotope');
  $container.isotope({
    itemSelector: '.element-item',
    getSortData: {
      category: '[data-category]'
    }
  });

    $container.first().addClass('first'); <----- i need to add class for first element

  // bind sort button click
  $('#sorts').on( 'click', 'a', function() {
    var sortByValue = $(this).attr('data-sort-by');
    $container.isotope({ sortBy: sortByValue });

    $container.first().addClass('first');
  });

  });
  return false;
});

Thnx求助：）

Answer 1

适用于Isotope v2

可选：首先，您可能希望确保删除＆＃34; .first＆＃34;使用此代码对每种类进行分类。你需要在类添加代码之前加上它，以避免在＆＃34; .first＆＃34;中添加两个元素。类：

$(".isotope").find('.first').removeClass('first');

您可以通过以下方式访问同位素过滤的第一项：

$container.data('isotope').filteredItems[0].element

您可以使用以下代码向该元素添加一个类：

$($container.data('isotope').filteredItems[0].element).addClass('first');

这是我从David DeSandro分叉的代码笔，它演示了我解释过的代码。它使同位素列表中的第一个元素变黑：

http://codepen.io/tovly/pen/gbxOMr

我添加到codepen的代码位于javascript的底部，并标有注释。

请记住，您可能希望将此代码绑定到单击排序和过滤按钮。您还应该在页面加载时运行类添加代码，以便第一个项目具有＆＃34; .first＆＃34;类。

以下是来自同位素创造者的一些文件。它位于副标题下＆＃34;如何按当前顺序访问过滤的项目？＆＃34;

http://isotope.metafizzy.co/faq.html

适用于Isotope v1

您可以使用

访问同位素过滤的项目

$container.data('isotope').$filteredAtoms;

然后你会找到对象中的第一个项目并为其添加一个类：

$container.data('isotope').$filteredAtoms.first().addClass('first');

如何在使用isotope.js进行排序\过滤后获得第一个元素

1 个答案: