我如何使用 isotope.js 获得 sorting\filtering 之后的第一个元素

Question

如何用同位素 2 为 sorting\filtering 之后的第一个元素设置一些 class？

$( 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;
});

感谢帮助:)

Answer 1

同位素 v2

可选： 首先，您可能希望确保使用此代码每次排序都删除“.first”class。您需要将其放在 class 添加代码之前，以避免添加带有“.first”的两个元素 class:

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

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

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

您可以使用以下代码向该元素添加 class：

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

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

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

我添加到 codepen 的代码靠近 javascript 的底部并标有注释。

请记住，您可能希望将此代码绑定到对排序和过滤按钮的点击。当页面加载时，您还应该有 class 添加代码运行，以便第一个项目具有“.first” class.

这是同位素的创造者提供的一些相关文档。在副标题下 "How can I access filtered items in current order?"

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

同位素 v1

您可以使用

访问按同位素过滤的项目

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

然后你会在 object 中找到第一项并向其添加一个 class:

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

我如何使用 isotope.js 获得 sorting\filtering 之后的第一个元素

How i can get first element after sorting\filtering with isotope.js

jquery-isotope