如何在 jQuery 中按值对子项进行排序

2023-11-29

我有一些带有我想要排序的跨度值的链接。

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();

saying

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

怎么了?为什么我不能将金额值添加到排序数组中?


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

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

Demo: http://jsfiddle.net/rF7LR/2/

I made a block with CSS for convenience to get rid of <br> tags.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在 jQuery 中按值对子项进行排序 的相关文章

随机推荐