0

tinySortを使用して、動的に作成された子 div をフィルタリングしています。これはうまく機能します。ただし、ソート後の子divの量も制限したいと思います。例.上位 5 つのソートされた div のみを持ちます。

これは、私がソートに使用した現在のコードです。

tinysort("#results > div", {
                    order: "desc",
                    attr: 'id'
    });

このようなものを使用することを考えました if (($this).children().length < 5)

しかし、それをtinySortに統合する方法、またはこの機能が既に存在するかどうかはわかりませんか?

提案やヘルプをいただければ幸いです。

DOM 構造 :

<div id="results" class="results">
 <div id="205" class="results-section">
  <div class="details">
    <h2>115</h2>
     </div>
      <div id="time">
       <h3>7</h3>
   <small>minutes</small>
  </div>
 </div>
<div id="196" class="results-section">
  <div class="details">
    <h2>115</h2>
     </div>
      <div id="time">
       <h3>7</h3>
   <small>minutes</small>
  </div>
 </div>
<div id="180" class="results-section">
  <div class="details">
    <h2>115</h2>
     </div>
      <div id="time">
       <h3>7</h3>
   <small>minutes</small>
  </div>
 </div>
</div>
4

1 に答える 1

1

私の意見では、ソート後に要素を非表示にすることが最善です。このようなもの

$('#results > div').tsort({
    order: "desc",
    attr: 'id'
}).filter(function (i, el) {
    return i > 4; // this way if the other elements need some other style
}).hide();

ここに例がありますhttp://jsfiddle.net/dhirajbodicherla/9VT8g/23/

またはさらに単純な

$('#results > div').tsort({
    order: "desc",
    attr: 'id'
}).slice(5).hide(); // strictly hide rest except first 5

2 番目のデモhttp://jsfiddle.net/dhirajbodicherla/9VT8g/24/

于 2015-05-23T21:58:30.227 に答える