同位体を使用して、さまざまな製品の機能に関連する多数のタイルを並べ替えてフィルター処理しています。各製品に固有のタイルもあれば、共有されているタイルもあります。製品を切り替えると、適切なクラス名でタグ付けされたタイルのみが表示されるようにタイルがフィルター処理されますが、製品ごとに機能の優先順位が異なるため、これらのタイルの順序を制御したいと考えています。順序を制御する方法を何も実装しない場合、それらはマークアップ内にある順序で表示されます。つまり、最初の製品の機能が、マークアップ内の後続の製品の最初のタイルになります。
これを行うための最も効率的な方法を見つけようとしています。現在、属性を次のように追加しています。
タイル
<div id="feature1" class="isotope-item productA productB" productAOrder="1" productBOrder="2">
Feature 1
</div>
<div id="feature2" class="isotope-item productA productB" productAOrder="2" productBOrder="1">
Feature 2
</div>
jQuery/同位体コード
$container.isotope({
getSortData: {
productA: function ($elem) {
return parseInt($elem.hasClass('productA').attr('productAOrder').text(), 10);
},
productB: function ($elem) {
return parseInt($elem.hasClass('productB').attr('ProductBOrder').text(), 10);
}
}
});
$container.isotope({ filter: '.productA'});
$container.isotope({ sortBy: 'productA', sortAscending : true});
なんらかの理由で、定義した順序に従ってタイルを取得できません。これを行うより良い方法はありますか?