根据数据属性排序列表(使用jQuery元数据插件) [英] Sort list based on data attribute (using jquery metadata plugin)

问题描述

我很难确定如何根据data属性中的键/值对之一对列表进行排序.

I'm having a tough time figuring out how to go about sorting a list based on one of the key/value pairs in the data attribute.

<ul>
    <li data="{name:'Foo', number: '1'}">
        <h3>Foo</h3>
    </li>

    <li data="{name:'Bar', number: '2'}">
        <h3>Bar</h3>
    </li>
</ul>

这是jQuery.我正在设置元数据attr并对其进行访问.所有这些都很好.

Here's the jQuery. I'm setting the metadata attr and accessing it. All of this works fine.

jQuery.metadata.setType("attr", "data");

$(document).ready(function(){   

    // loop through each list item and get the metadata
    $('ul li').each(function () {  
        console.log($(this).metadata());
        // shows the following - Object {name="Foo", number="1"}
    });

)};

示例:我需要按名称升序排序.有人可以指出我正确的方向吗?

Example: I would need to sort by Name ascending. Can someone point me in the right direction?

这是我用来触发排序的表格:

Here's the form I'm using to trigger the sorting:

<form name="filterForm">
    Sort: 
    <select name="sort" size="1">
        <option value="nameAsc" <cfif URL.sort EQ 1>selected="selected"</cfif>>Name A to Z</option>
        <option value="nameDesc" <cfif URL.sort EQ 2>selected="selected"</cfif>>Name Z to A</option>
        <option value="numberAsc" <cfif URL.sort EQ 3>selected="selected"</cfif>>Number 1-10</option>
        <option value="numberDesc" <cfif URL.sort EQ 4>selected="selected"</cfif>>Number 10-1</option>
    </select> 
</form> 

还有处理变更事件的jquery，但是我不确定我是否正确实现了Mikael Eliasson的代码，因为我不确定在哪里传递所选内容的值:

And the jquery to handle the change event, but I'm not sure I implemented Mikael Eliasson's code correctly because I'm not sure where to pass the value of what was selected:

$('form[name=filterForm] select').change(function(){

    var sortBy = this.value;

    var arr = []

    // loop through each list item and get the metadata
        $('ul li').each(function () {  
            var meta = $(this).metadata();
            meta.elem = $(this);
            arr.push(meta);
        });

    arr.sort(appendItems());

    function appendItems(){

        //Foreach item append it to the container. The first i arr will then end up in the top
        $.each(arr, function(index, item){
            item.elem.appendTo(item.elem.parent());
        }       

    }


});

推荐答案

Javascript具有排序函数，该函数可以将函数作为参数.当您进行自定义比较时，应该使用此功能.参见 http://www.w3schools.com/jsref/jsref_sort.asp

Javascript has a sort function which can take a function as argument. This function is supposed to be used when you have custom comparisons. See http://www.w3schools.com/jsref/jsref_sort.asp

所以我要做的就是这样

var arr = []
// loop through each list item and get the metadata
    $('ul li').each(function () {  
        var meta = $(this).metadata();
        meta.elem = $(this);
        arr.push(meta);
    });
 arr.sort(compare);

//Foreach item append it to the container. The first i arr will then end up in the top
$.each(arr, function(index, item){
    item.elem.appendTo(item.elem.parent());
});

更新了.each循环上方的语法-修复语法错误

Updated syntax on above .each loop - fixing syntax error

更正了每个循环的最后一个错误

Corrected a error in the last each loop

通过请求，我将使用比较功能进行更新

By request I'm updating with the compare function

function compare(a, b){
   return a.name - b.name;
}

这篇关于根据数据属性排序列表(使用jQuery元数据插件)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！