使用JQuery按属性对DIV进行排序

时间:2016-09-02 12:47:58

标签: javascript jquery html sorting

我正在尝试使用按钮使用自定义属性对多个DIV进行排序。我关注this example但无法使用自定义属性。我知道我访问属性的方式可能有问题,但不知道如何修复它。

我的HTML是:

<button id="opBnt">OP</button>      
<button id="inBnt">IN</button>
<div id="collapsible" class="panel-collapse">                   
    <div id="1" class="superduper" data-sort-op="0.4" data-sort-in="0.1">a</div>
    <div id="2" class="superduper" data-sort-op="0.2" data-sort-in="0.8">b</div>
    <div id="3" class="superduper" data-sort-op="0.3" data-sort-in="0.3">c</div>
</div>

JS

var $divs = $("div.superduper");
$('#opBnt').on('click', function () {
    var opOrder = $divs.sort(function (a, b) {
        return $(a).getAttribute('data-sort-op') > $(b).getAttribute('data-sort-op');
    });
    $("#collapsible").html(opOrder);
});

$('#inBnt').on('click', function () {   
    var inOrder = $divs.sort(function (a, b) {
        return $(a).getAttribute('data-sort-in') > $(b).getAttributel('data-sort-in');
    });
    $("#collapsible").html(inOrder);
});

Fiddle

2 个答案:

答案 0 :(得分:4)

  1. sort函数应返回-1, 0, 1个值。
  2. 您可以使用data功能访问data-*属性。
  3. 检查此示例:

    &#13;
    &#13;
    var $divs = $("div.superduper");
    $('#opBnt').on('click', function () {
        var opOrder = $divs.sort(function (a, b) {
            return $(a).data('sort-op') < $(b).data('sort-op') ? -1 : 1;
        });
        $("#collapsible").html(opOrder);
    });
    
    $('#inBnt').on('click', function () {   
        var inOrder = $divs.sort(function (a, b) {
            return $(a).data('sort-in') < $(b).data('sort-in') ? -1 : 1;
        });
        $("#collapsible").html(inOrder);
    });
    &#13;
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <button id="opBnt">OP</button>      
    <button id="inBnt">IN</button>
    <div id="collapsible" class="panel-collapse">                   
        <div id="1" class="superduper" data-sort-op="4" data-sort-in="1">a</div>
        <div id="2" class="superduper" data-sort-op="2" data-sort-in="8">b</div>
        <div id="3" class="superduper" data-sort-op="3" data-sort-in="3">c</div>
    </div>
    &#13;
    &#13;
    &#13;

答案 1 :(得分:1)

完成。使用 .data 方法代替 .getAtrribute

稍微改进了您的代码

&#13;
&#13;
var $divs = $("div.superduper");
$('#opBnt').on('click', function () {
    var opOrder = $divs.sort(function (a, b) {
        return $(a).data('sort-op') > $(b).data('sort-op');
    });
    $("#collapsible").html(opOrder);
});

$('#inBnt').on('click', function () {   
    var inOrder = $divs.sort(function (a, b) {
        return $(a).data('sort-in') > $(b).data('sort-in');
    });
    $("#collapsible").html(inOrder);
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="opBnt">OP</button>      
<button id="inBnt">IN</button>
<div id="collapsible" class="panel-collapse">                   
    <div id="1" class="superduper" data-sort-op="4" data-sort-in="1">a</div>
    <div id="2" class="superduper" data-sort-op="2" data-sort-in="8">b</div>
    <div id="3" class="superduper" data-sort-op="3" data-sort-in="3">c</div>
</div>
&#13;
&#13;
&#13;