jquery-isotope - 循环聚焦和同位素排序

Question

我有类似这个例子的东西，排序效果很好。据我所知，isotope 使用某种缓存，然后使用 CSS 规则，它对最终视图中的所有内容进行排序。但它实际上并没有对 DOM 进行排序，因此焦点循环无法按预期工作。除了自己对 DOM 进行排序之外，我还能做些什么来解决此问题？

Answer 1

最后，我的解决方案是使用他的绝对位置计算每个元素的 tabindex。

function sortFocus(sortClass) {
    var button = $('div.isotope-button').first() ;       

    setTimeout(function() {
        $('div.isotope-button.' + sortClass).each(function(index) {
            var pos = $(this).position(), posx = (pos.left) / button.outerWidth(), posy = ((pos.top) / button.outerHeight()) + 1;
            $(this).find('a').attr('tabindex', posy + '' + posx);
        });
    }, 1000);
}

一些想法：

• 同位素插件没有动画后的回调函数。
• 计算基于按钮的大小，假设所有按钮的大小相同。我不知道是否适用于不同尺寸
• 在我的例子中，每个同位素按钮都有一个内部链接。

Answer 2

这也有效，filteredItems 总是以正确的顺序返回。

$myIsotope.on('arrangeComplete', function (e, filteredItems) {
  var tabIndex = 1;
  $(filteredItems).each(function (index, item) {
    $(item.element).find('a.title').attr('tabindex', tabIndex);
    tabIndex++;
  });
});