javascript - 对 HTML div 进行排序

Question

我有一个包含图像列表的数据库表。每个图像还附加了数据，例如名称和值。使用此表，我使用 PHP 创建 HTML 代码，在屏幕上创建一个网格，每个网格都有表中的图像/名称/值。

这是我生成 HTML 的 PHP:

//Makes a div for each item in table
Echo "<li id=div" . $i . ">";
//Content for single grid block
Echo '<center><h3 id="credits' . $i . '">' . $credit_value . " credits" .  '</h3></center>';
Echo "<img id='item" . $i ."' src= '$new_link' title='$row[Item_Name]' class='clickableImage' alt='$just_name' data-creditvalue='" . $credit_value . "' data-imagenumber='" . $i . "'border=0 style='position: center; top: 0; left: 0;'/>";
Echo '<center><h3 id="quality">' . $quality . '</h3></center>';
Echo '</li>';

这使得每个 div 命名为“div1”、“div2”等。在 //content 部分中，打印的图像为 data-imageName=$imageName 并且data-imageValue=$value，不过我应该能够将它们附加到保存内容的 div 上。

我想要做的是在页面顶部添加按钮，该按钮将按类别对图像网格进行排序。它当前是按数据库表中的项目顺序加载的，但例如，我有一个可以在加载网格后单击的按钮，这会更改所有 div 的顺序，因此它们按字母顺序排列，或者最低值->最高值。

我该怎么做？

编辑:这是由上述代码生成的 html 示例。

<li id="div2">
    <center>
        <h3 id="credits2">108 credits</h3>
    </center>
    <div style="position: relative; left: 0; top: 0;">
        <img id="item2" src="http://steamcommunity-a.akamaihd.net/economy/image/fWFc82js0fmoRAP-qOIPu5THSWqfSmTELLqcUywGkijVjZYMUrsm1j-9xgEObwgfEh_nvjlWhNzZCveCDfIBj98xqodQ2CZknz56P7fiDz9-TQXJVfdSXfgF9gT5DBg-4cBrQJnv8eMDKgnutIGTZeEpYt8dH5LTU_ePNwj-uE9s1aZVepTb9Czu33zpJC5UDL2Z8FjG/155fx118f" title="AK-47 | Blue Laminate (Minimal Wear)" class="clickableImage" alt="AK-47 | Blue Laminate " data-creditvalue="108" data-imagenumber="2" border="0" style="position: center; top: 0; left: 0;">
        <img src="images/tick.png" id="tick2" class="hidden" style="position: absolute; top: 0px; left: 70%;">
    </div>
    <center>
        <h3 id="quality">Minimal Wear</h3>
    </center>
</li>

Answer 1

使用 jQuery 对节点进行排序非常容易(实际上在纯 JS 中也是如此)。您需要使用委托(delegate)给 Array.prototype.sort 的 sort 方法，只需提供自定义比较器函数即可。

在您的情况下，您希望能够按字符串标题和数字进行排序，因此我将创建两个单独的函数并根据单击的按钮使用它们:

<button onclick="sort('title', 'string')">Sort by name</button>
<button onclick="sort('data-creditvalue', 'number')">Sort by value</button>

和sort函数将是

var comparators = {
    string: function(a, b) {
        return a.localeCompare(b);
    },
    number: function(a, b) {
        return Number(a) - Number(b);
    }
};

function sort(attr, type) {

    var $container = $('ul'),
        $li = $container.find('li');

    $li.sort(function(a, b) {
        var aVal = $(a).find('img').attr(attr),
            bVal = $(b).find('img').attr(attr);
            console.log(aVal)
        return comparators[type](aVal, bVal);
    }).appendTo($container);
}

演示: http://plnkr.co/edit/lLJ0AWlLvwDeInBEIYCb?p=info