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

Answer 2

排序算法与其他排序方法没有区别。他们每个人都需要从DOM元素中提取值到排序，你只需要改变那个提取函数。在你的情况下，它将像

parseInt($element.find(".postDescContent").text().replace(/Points: /,""));

Answer 3

除了相关讨论之外，这两个答案here和here可能对您特别感兴趣。

使用嵌套内容对div进行排序

3 个答案: