javascript - 如何在 jQuery 中按值对 child 进行排序

Question

我有链接和我想要排序的跨度值。

http://jsfiddle.net/rF7LR/

在这个例子中，我想按数量排序。

HTML:

<a id = "sortamount" class = "sort"><span>amount</span></a>

<div id='entrytable'> 
    <a class="entrylink" href="/link">

                <span class = "entry amount">10</span>

                <span class = "entry rating">11</span>

                <span class = "entry price">12</span>

            </a><br>
      <a class="entrylink" href="/link">

                <span class = "entry amount">15</span>

                <span class = "entry rating">16</span>

                <span class = "entry price">100</span>

            </a><br>
     <a class="entrylink" href="/link">

                <span class = "entry amount">13</span>

                <span class = "entry rating">12</span>

                <span class = "entry price">11</span>

            </a><br>

</div>

JS:

$('#sortamount').on('click', function() {
    var entries = document.getElementsByClassName('entrylink'); //nodelist
    var sorted = [];

    for (var i = 0; i < entries.length; i++) { 
        var value = entries[i].children('span.amount').val();
        sorted.push(value);
    }

    sorted.sort();
    $('#entrytable').html('');

    for (var i = 0; i < entries.length; i++) { 
        //find entrylink with sorted amount
        entries.filter(function(){return this.children('a span.amount').val() == sorted[i]});
        //append to entrytable
    }
});

现在我在

var value = entries[i].children('span.amount').val();

说

'[object HTMLCollection]' is not a function (evaluating 'entries[i].children('span.amount')')

怎么了？为什么我不能将 amount 的值添加到排序数组中？

Answer 1

如果您需要对列表进行排序，我认为如果您使用一些 jQuery 功能，它会简单得多:

$('#sortamount').on('click', function () {
    $('.entrylink').sort(function(a, b) {
        return $(a).find('.amount').text() - $(b).find('.amount').text();
    })
    .appendTo('#entrytable');
});

演示:http://jsfiddle.net/rF7LR/2/

_{我做了 a使用 CSS block 以方便摆脱 <br>标签。}