Question

如果我正在运行jquery ui并在ul元素中使用sortable：

$("#example").sortable({
    update: function () {
        //do something
    }
});

<ul id="example">
<li data-ex="1.1"></li>
<li data-ex="0.1"></li>
<li data-ex="1.4"></li>
</ul>

有没有办法触发一个事件，通过动态数据属性对我的元素进行排序？基本上我想要一个按数据属性对li元素进行排序的按钮也会触发sortable（）中的更新。

Answer 1

你可以试试这个：

$(document).ready(function () {
    $("#example").sortable({//Sortable initialisation
        update: function () {
            updatehandler();//Custom function which handles sortable update.
        }
    });
    $('a').click(function () {// Click handler to sort
        var list = $('#example');
        var listItems = list.find('li').sort(function (a, b) {
            return $(a).attr('data-ex') - $(b).attr('data-ex');
        });
        list.find('li').remove();
        list.append(listItems);
        updatehandler();//Call updatehandler after sorting
        return false;
    });    
});

function updatehandler() {
    //Your update handler code.
    alert('updated');
}

HTML：

<a href="">Sort</a>
<ul id="example">
    <li data-ex="1.1">1.1</li>
    <li data-ex="0.1">0.1</li>
    <li data-ex="1.4">1.4</li>
</ul>

演示：http://jsfiddle.net/lotusgodkk/GCu2D/151/

Answer 2

我对sortable不太熟悉，但是这个小提琴显示了如何获取data-ex属性的值，并定义了一个用于在插件中进行排序的变量： http://jsfiddle.net/FF7z6/

我在您的html中添加了class="sort"，然后我们通过使用以下内容获取了该值：

var dataEx;
$('.sort').click(function(){
var dataEx = $(this).attr("data-ex");
alert(dataEx);
});

jquery ui sortable - 按属性值排序

2 个答案: