javascript - JQuery 按子 div 排序 div

Question

我有以下 div 列表，我希望能够使用 Javascript/JQuery 对它们进行排序。

<div class="item">
    <div class="genre">Classical</div>
    <div class="name">Alpha</div>
    <div class="location">London</div>
</div>

<div class="item">
    <div class="genre">Blues</div>
    <div class="name">Bravo</div>
    <div class="location">New York</div>
</div>

<div class="item">
    <div class="genre">Pop</div>
    <div class="name">Charlie</div>
    <div class="location">Paris</div>
</div>

<div class="buttons">
<a href="">Sort by Genre</a>
<a href="">Sort by Name</a>
<a href="">Sort by Location</a>
</div>

我希望能够按流派/名称/位置的字母顺序对项目进行排序。

示例:如果单击按流派排序，它将按流派对 0-9 A-Z 中的项目进行排序。

如果你们有任何提示，我们将不胜感激。

干杯:)

Answer 1

你必须像下面这样对 html 做一点改动:

<div id="container">
<div class="item">
    <div class="genre">Classical</div>
    <div class="name">Alpha</div>
    <div class="location">London</div>
</div>

<div class="item">
    <div class="genre">Blues</div>
    <div class="name">Bravo</div>
    <div class="location">New York</div>
</div>

<div class="item">
    <div class="genre">Pop</div>
    <div class="name">Charlie</div>
    <div class="location">Paris</div>
</div>
</div>
<div class="buttons">
<a href="" id="genre">Sort by Genre</a>
<a href="" id="name">Sort by Name</a>
<a href="" id="location">Sort by Location</a>
</div>

jQuery

function sorting(tag) {
    var items = $('div.item').sort(function(a, b) {
        var txt1 = $.trim($('div.' + tag, a).text()),
            txt2 = $.trim($('div.' + tag, b).text());
        if (txt1 > txt2) return 1;
        else return -1;
    });
    return items;
}
$('.buttons a').on('click', function(e) {
    e.preventDefault();
    $('div#container').html(sorting(this.id));
});

Working Sample