2

私のアプリケーションでは、クライアントに画像を並べて動的にレンダリングしています。ユーザーは画像にポイントを与えることができ、ボタンをクリックすることで、ポイントの高いポイントから降順に画像を並べ替えることができるようにしたいと考えています。

Stack で div の並べ替えに関する例をいくつか見てきましたが、私の例では、画像を並べ替える必要があるコンテンツは、ネストされた div 内にあります (以下を参照)。このパラメーター (ポイント) で画像を並べ替える良い方法は何ですか?何かアイデアはありますか?

<div class="image">
    <div class="post">
        // other code here
            <img src="img/image1.png" />
        <div class="postDesc">
            // other code here
            <p class="postDescContent">Points: 20</p>
        </div
    </div>
</div>

<div class="image">
    <div class="post">
        // other code here
            <img src="img/image2.png" />
        <div class="postDesc">
            // other code here
            <p class="postDescContent">Points: 10</p>
        </div
    </div>
</div>

// and so on...

編集: 両方のイメージに同じ ID を使用していたという事実を多くの人が指摘しているようです。悪いことに、私はこれを知っていましたが、例を作成しているときに忘れてしまいました。代わりにクラスに変更されました。

4

3 に答える 3

3

注: ID の重複を避けるように注意してください

HTML

<div id="container">
<div id="image1">
    <div class="post">
            <img src="img/image1.png" />
        <div class="postDesc">
            <p class="postDescContent">Points: 20</p>
        </div>
    </div>
</div>

<div id="image3">
    <div class="post">
            <img src="img/image2.png" />
        <div class="postDesc">
            <p class="postDescContent">Points: 30</p>
        </div>
    </div>
</div>

<div id="image2">
    <div class="post">
            <img src="img/image2.png" />
        <div class="postDesc">
            <p class="postDescContent">Points: 10</p>
        </div>
    </div>
</div>
</div>

jQuery:

var contents = $('div#container div[id^="image"]');
contents.sort(function(a, b) {
    var p1= parseInt($('p.postDescContent', $(a)).text().replace(/Points: /,'').trim()),
        p2 = parseInt($('p.postDescContent', $(b)).text().replace(/Points: /,'').trim());
       return p2  - p1;
});

$('#container').empty().append(contents);

デモ

于 2012-05-08T11:09:47.177 に答える
1

ソート アルゴリズムは、他のソート方法と同じです。それらのそれぞれは、DOM 要素からソートする値を抽出する必要があります。その抽出関数を変更するだけで済みます。あなたの場合、それは次のようになります

parseInt($element.find(".postDescContent").text().replace(/Points: /,""));
于 2012-05-08T11:03:14.640 に答える
1

関連する議論に加えて、こことここの2つの答えは、あなたにとって特に興味深いかもしれません.

于 2012-05-08T11:04:23.033 に答える