javascript - 使用 javascript 对复杂的无序列表进行排序

Question

我正在寻找一种使用标准 javascript 或 jQuery 对相当复杂的 html 无序列表进行排序的方法。

请查看 HTML，顺序需要按字母顺序排列，并且基于 ".keywordType span value" 中找到的 HTML，但需要构造顶级 li 的顺序(具有唯一的关键字_xxx)。我刚刚粘贴了数十个列表项中的 2 个。

<ul class="keywords">
    <li id="keyword_185">
        <div class="icon_keyword"></div>
        <input type="hidden" class="keywordLabel" value="More opening hours">
        <div class="data-wrapper">
            <div class="keywordType">
                <span class="oh">Payment methods</span>
            </div>
            <div class="keywordValue">
                <span id="keyword_185" class="oh">Credit Card, PayPal</span>
            </div>
        </div>
        <a class="edit" title="Edit keywords"></a>
        <a class="delete" title="Delete keywords"></a>
    </li>
    <li id="keyword_192">
        <div class="icon_keyword"></div>
        <input type="hidden" class="keywordLabel" value="Monday to Friday: 8:30am to 6:30pm Saturday: 9pm to 6:30pm Sunday: 10 - 4pm">
        <div class="data-wrapper">
            <div class="keywordType">
                <span class="oh">Opening Hours</span>
            </div>
            <div class="keywordValue">
                <span id="keyword_192" class="oh">Monday to Friday: 8:30am to 6:30pm<br>Saturday: 9pm to 6:30pm<br>Sunday: 10 - 4pm</span>
            </div>
        </div>
        <a class="edit" title="Edit keywords"></a>
        <a class="delete" title="Delete keywords"></a>
    </li>
</ul>

谢谢

Answer 1

var list = $('ul.keywords');
var listItems = $('li', list);

listItems.sort(function (a, b) {
    return $(a).text() > $(b).text() ? 1 : -1;
});

list.append(listItems);

您可以sort元素列表(jQuery 对象具有 Array 的所有方法，包括 Array.prototype.sort )。

在比较功能中，只需比较列表项的文本内容。随后将根据各个字母在字母表中的位置(实际上是 Unicode 表)进行比较。例如，k > a 为 true。

最后，只需将项目重新附加到列表中即可。

演示:http://jsbin.com/igesic