jquery-isotope - 同位体によるフォーカスとソートのサイクル

Question

この例のようなものがありますが、並べ替えはうまく機能します。私が見る限り、同位体はある種のキャッシュを使用し、CSS ルールを使用して、最終的なビューですべてを並べ替えます。しかし、実際にはDOMをソートしないため、フォーカスサイクルが期待どおりに機能しません。自分でDOMをソートする以外に、この動作を修正するためにできることはありますか?

Answer 1

結局、私の解決策は、絶対位置を使用して各要素のタブインデックスを計算することでした。

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

いくつかの考え:

• isotope プラグインにはアニメーション後のコールバック機能がありません。
• すべてのボタンが同じサイズであると仮定して、計算はボタンのサイズに基づいています。異なるサイズで動作するかどうかはわかりません
• 私の場合、各同位体ボタンには内部リンクがあります。

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++;
  });
});