2

こんにちは、

私は、私が必要とすることを行うためにある種の jQuery プラグインを探し回っていますが、これまでのところ、私が必要とすることを完全に行うものは好きではありません。

CMS を使用してクライアント用の Web アプリを作成しました。クライアントは、今後開催されるウェビナーの詳細を入力できます。

ユーザーが入力するデータの一部は、CSS で作成した小さなカレンダー要素内に表示される日 (01 ～ 31) と月 (1 月 ～ 12 月) です。以下の例でわかるように、月が中に入れられ<span class="m">MONTH</span>、日が入れられます。<span class="d">DAY</span>

これらは、グリッド スタック形式でページに配置されます。

私ができないように見えるのは、その特定のデータを使用してこれらの要素を順序付けする方法を見つけることです。

どんな助けでも大歓迎です！

<div class="webinar-item">
    <div class="cal">
        <span class="m">sep</span>
        <span class="d">14</span>
    </div>

    <div class="data">
        <a href="#" title="Webinar Title">
            <h2>Webinar Title</h2>

            <span class="clearfix st Specific-Times">
                <span class="s">
                    <em>Start:</em>10:00am
                </span>
                <span class="f">
                    <em>Finish:</em>12:30pm
                </span>
            </span>

            <span class="price">
                <em>Price:</em>FREE
            </span>

            <p class="overview-1">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tincidunt sagittis nunc. Curabitur mollis hendrerit diam ac iaculis. Phasellus velit neque, aliquet eu viverra a, congue id sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec magna justo, viverra nec bibendum semper, porttitor pellentesque purus. In ante metus, tincidunt eu suscipit sit amet, imperdiet id justo. Phasellus elementum egestas nibh, vitae sodales nunc aliquet non.
            </p>
        </a>
        <a href="#">go to meeting</a>
    </div>
</div>

PS注文のためにこのデータを複数回プルすることを妨げるものは何もありません。

4

2 に答える 2

4

webinar-itemによって認識される形式の文字列日付を持つデータ属性を に追加するのが理想的Date.parseです。jQuery は、メソッドを使用してこのデータを取得または設定できますdata()。また、ユーザー向けに実装する可能性が高い日付ピッカーからも簡単に取得できます。

<div class="webinar-item" data-date="12/15/2012">/* add hours/mins*/

次に、UTC 時間を使用してカスタム ソーターを生成できます。

function sortDate( a, b){
  return parseDate(a) > parseDate(b) ? true :false;    
} 

function parseDate( el){
    return Date.parse($(el).data('date'));
}

 $('#content').html( $('.webinar-item').sort(sortDate));

デモ http://jsfiddle.net/TxFqu/2

編集:さらに良いことに、UTC時間をdata-date属性に保存Date.Parseし、コードのこの部分で完全に削除します

于 2012-10-29T01:55:41.843 に答える
0

これが私がすることです。

function sortItems(descending) {
    descending = !!descending;
    // converts it into a boolean
    var months = ['jan','feb','mar','apr','may','jun','jul','aug','sep','oct','nov','dec'];
    // define your months here
    var items = $('.webinar-item').get();
    // get all the available nodes
    var parent = $('.webinar-item').parent();
    // assuming there's a unique, single parent
    var year = (new Date()).getFullYear();
    // assuming it's the current year
    items.sort(function(a,b) {
        var m1 = months.indexOf($(a).find('>.cal>.m').text()); // month 1
        var d1 = parseInt($(a).find('>.cal>.d').text()); // day 1
        var m2 = months.indexOf($(b).find('>.cal>.m').text()); // month 2
        var d2 = parseInt($(b).find('>.cal>.d').text()); // day 2
        var dt1 = new Date(year,m1,d1);
        var dt2 = new Date(year,m2,d2);
        if (descending)
            return dt1 > dt2 ? -1 : (dt1 < dt2 ? 1 : 0);
        return dt1 > dt2 ? 1 : (dt1 < dt2 ? -1 : 0);
    });
    $.each(items,function(idx,elm) { parent.append(elm) });
}

sortItems();昇順とsortItems(true);降順のように、この関数を呼び出すことができます。

于 2012-10-29T02:07:48.413 に答える