代码之家 › 专栏 › 技术社区 › Gracie williams

使用data属性对元素集进行升序和降序排序

jquery javascript

Gracie williams · 技术社区 · 6 年前

我可以通过下面的代码升序排序

function getSorted(selector, attrName) {
    return $($(selector).toArray().sort(function(a, b){
        var aVal = parseInt(a.getAttribute(attrName)),
            bVal = parseInt(b.getAttribute(attrName));
        return aVal - bVal;
    }));
}


var sorthtml = getSorted('.instrument', 'data-sortpopular');
$(".vddl-list").html(sorthtml);

但由于无法按降序排序,我尝试了如下方法

sorthtml.toArray().reverse();
$(".vddl-list").html(sorthtml);

正如评论中所问:下面是示例html

<div class="vddl-list" data-sortpopular="12">
something
</div>
<div class="vddl-list" data-sortpopular="2">
something
</div>
<div class="vddl-list" data-sortpopular="3">
something
</div>

2 回复 | 直到 6 年前

sjahan 6 年前

你的 getSorted 功能坏了,这里有一个修复,那么它会很好地工作!

如果您想要升序,只需注释最后两行,否则,您将得到相反的版本(降序);)

希望这有帮助!

function getSorted(selector, attrName) {
    return $(selector).toArray().sort(function(a, b){
        var aVal = parseInt(a.getAttribute(attrName)),
            bVal = parseInt(b.getAttribute(attrName));
        return aVal - bVal;
    });
}


var sorthtml = getSorted('.instrument', 'data-sortpopular');
$(".vddl-list").html(sorthtml);
sorthtml.reverse();
$(".vddl-list").html(sorthtml);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="instrument" data-sortpopular="12">
something 12
</div>
<div class="instrument" data-sortpopular="2">
something 2
</div>
<div class="instrument" data-sortpopular="3">
something 3
</div>

<div class="vddl-list"></div>

Bhushan Kawadkar 6 年前

试试这个:你可以创建一个像下面这样的函数,只需颠倒减法的顺序

sorthtml = sorthtml.toArray().reverse(function(a, b){
        var aVal = parseInt(a.getAttribute('data-sortpopular')),
            bVal = parseInt(b.getAttribute('data-sortpopular'));
        return bVal - aVal;
});
$(".vddl-list").html(sorthtml);

推荐文章

Newbie_Coder · 如何使用Jquery无画布裁剪框架

1 年前

usman610 · Javascript代码在点击回车键和点击按钮时删除行

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Carly · 在页面加载时滑入div,然后单击以滑入和滑出(jQuery)

1 年前

Community wiki · jquery弹出窗口不会用按键关闭,但会点击

1 年前

Community wiki · Smarty IE9请求下载index.php文件(在上传未发生后)?是我的代码出错还是activecollab?

1 年前

Community wiki · 无法从jquery文档调用函数

1 年前

marzouk najib · Uncaught ReferenceError:未定义FullCalendar

2 年前

Pepe · 检查“data”属性是否包含输入值的一部分(jQuery)

2 年前

laurence keith albano · 如何使用Jquery在父类内添加子父类

2 年前