1

私はケーススタディを並べ替える堅牢でシンプルな方法を探していましたが、数時間後、スタックオーバーフローを検索した後、ケーススタディを希望どおりにフィルタリングする方法が見つかりませんでした。

基本的に、cssクラスを使用して、各ケーススタディに3つのカテゴリ（作成年、プロジェクトのタイプ、名前）を指定します。たとえば、マークアップは次のようになります。

<div class="name1 home 2013"></div>
<div class="name2 work 2012"></div>
<div class="name3 home 2012"></div>
<div class="name4 charity 2012"></div>
<div class="name5 home 2010"></div>
<div class="name6 work 2007"></div>

次に、ケーススタディを並べ替えるカテゴリを選択できるようにボタンが必要です。だから何かのような。

<div class="button" id="year">Sort by Year</div>
<div class="button" id="alpha">sort Alphabetically</div>
<div class="button" id="type">sort by type</div>

これは私が立ち往生しているところです。「年で並べ替え」ボタンをクリックすると、次のようなマークアップが作成されるように、どのjavascript関数を作成できますか。たとえば、すべてのケーススタディを同じ年のケーススタディを含むdivに並べ替えます。

<div>
   <div class="name1 home 2013"></div>
</div>

<div>
<div class="name2 work 2012"></div>
<div class="name3 home 2012"></div>
<div class="name4 charity 2012"></div>
</div>

<div>
<div class="name5 home 2010"></div>
</div>

<div>
<div class="name6 work 2007"></div>
</div>
4

1 に答える 1

2

フィルタリングを簡単にするためにデータ属性を使用します。

<div class="name1 home" data-year="2013">2013</div>
<div class="name2 work" data-year="2012">2012</div>
<div class="name3 home" data-year="2012">2012</div>
<div class="name4 charity" data-year="2012">2012</div>
<div class="name5 home" data-year="2010">2010</div>
<div class="name6 work" data-year="2007">2007</div>

JQueryとarray.mapの使用（古いブラウザーのサポートが必要な場合は、foreachに置き換えることができます）

var studies = $('[data-year]')

studies.map(function(index, el) {
    var $el = $(el)
    year = $el.attr('data-year')
    if($('#' + year).length == 0){
        $(document.body).append(
            $('<div>').attr('id', year)
            .css('margin-bottom', '20px')
        )
    }

    $('#' + year).append(el)
 })

これは、data-year属性を持つすべての要素を取得し、foreach要素がその要素yearのIDを持つdivが存在するかどうかを確認します。作成されない場合は、本文に追加します。次に、要素を年コンテナに追加します。

このjsfiddleを参照してください

于 2013-02-10T16:04:12.883 に答える