2

Isotope のエントリ数を制限することはできますか? 現在、Isotope をテーブルのようなデータ構造に適応させており、動的ソートを追加しています。

やり方は - 私は HTML に設定された数のエントリを持っています (当面は 10)。それらは追加された時間でソートされます。ユーザーが何らかのソートを選択すると、要求されたパラメータに一致する他のエントリがデータベースに存在する可能性がありますが、それらはロードされません。したがって、jQuery を使用して、ユーザーの並べ替え要求に一致する要素を挿入します

$.get('myfile.php?request=something', function(callback) {
    var $newItems = $(callback);
    $('.container').isotope( 'insert', $newItems );
    $('.container').isotope({ sortBy : USER_SORT });
});

すべてが完全に機能しますが、私が抱えている唯一の問題は、より多くの要素が追加されることです (表示されるエントリの設定数を維持したい)。回避策を実行して、コンテナと set の高さを制限することもできますが、overflow: hidden;垂直方向の無限スクロールも実装しています (一番下までスクロールすると、エントリが追加されます)。そのため、コンテナ自体を常に管理する必要がありますが、これを行うためのより良い方法があるべきだと私には思えますか?

もう 1 つの方法は、新しい要素を追加し、並べ替えを行ってから、不要なエントリを一番下から削除することですが、追加のデータがフィルター処理されてアニメーション化されてから削除されるのをユーザーが確認するため、これはひどいものです。

だから私の質問..アイソトープ自体のエントリを制限する方法はありますか? または、誰かがそれらを制限する方法についてより良い考えを持っているのでしょうか?

ありがとう

4

2 に答える 2

13

CSS セレクターを使用してnth-child、フィルタリングされた結果のセットを制限できます。

$grid.isotope({
    filter: ':nth-child(-n+10)'
});

これにより、最初の 10 件の結果が表示されます。

于 2013-05-20T15:44:08.713 に答える
1

Thought I would add my two cents to this, as :nth-child(-n+*) wasn't suitable for my case. The reason being is that nth-child selects the elements in the order they appear in the DOM, so if your elements are in a random order it doesn't really work.

A less elegant way to solve this issue is to change the isotope instance's item selector to a class you add to the items you want to display, such as .item-selected, then add that class to the first n items in the filteredItems collection returned from the arrangeComplete callback. This is inelegant because it requires you to destroy and reinitialise your isotope container every time you filter it, but it works.

于 2015-09-04T15:00:33.620 に答える