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

除了相关讨论之外，此处和此处的这两个答案可能会让您特别感兴趣。

于 2012-05-08T11:04:23.033 回答