javascript - 对具有嵌套内容的 div 进行排序

Question

在我的应用程序中，我动态地将图像并排渲染到客户端。作为用户，可以为图像提供分数，并且我希望可以通过单击按钮对图像进行排序，首先从最高点开始，然后按降序排列。

我在 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 的事实。我的错，我知道这一点，但我在创建示例时忘记了它。现在已更改为类。

Answer 1

注意: 注意避免 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);

<强> DEMO