Question

我需要点击链接或按钮从列表中移动一些选定的项目。

为用户提供4个选项：向后或向前放置所有选定的项目，或者将所有项目放在列表的顶部或列表的底部。

我找到了一个名为jquery.tinysort.js

的Jquery插件

实际上，我不需要使用这个插件，可以是任何插件或代码，只需要正常工作。

按照html代码：

    <div>
        <p>
            <a onclick="$('ul#ordenar>li').tsort({attr:'id'});">REFRESH ORDER</a> or 
            <a onclick="$('ul#ordenar>li').tsort('div[class=checkTrue]');">ALL SELECTED TO TOP</a> or 
            <a onclick="$('ul#ordenar>li').tsort('div[class=checkFalse]');">ALL SELECTED TO BOTTOM</a> or 
            <a>ALL SELECTED ONCE UP</a> or
            <a>ALL SELECTED ONCE DOWN</a> 
        </p>
        <ul class="" id="ordenar">
            <li id="0"><div class="checkTrue"></div>checkTrue teste0</li>
            <li id="1"><div class="checkFalse"></div>checkFalse teste1</li>
            <li id="2"><div class="checkFalse"></div>checkFalse teste2</li>
            <li id="3"><div class="checkTrue"></div>checkTrue teste3</li>
            <li id="4"><div class="checkFalse"></div>checkFalse teste4</li>
            <li id="5"><div class="checkTrue"></div>checkTrue teste5</li>
        </ul>
    </div>

当ALL SELECTED ONCE UP时，列表的顺序应为：

        <ul class="" id="ordenar">
            <li id="0"><div class="checkTrue"></div>checkTrue teste0</li>
            <li id="1"><div class="checkFalse"></div>checkFalse teste1</li>
            <li id="3"><div class="checkTrue"></div>checkTrue teste3</li>
            <li id="2"><div class="checkFalse"></div>checkFalse teste2</li>
            <li id="5"><div class="checkTrue"></div>checkTrue teste5</li>             
            <li id="4"><div class="checkFalse"></div>checkFalse teste4</li>
        </ul>

当ALL SELECTED ONCE DOWN时，列表的顺序应为：

        <ul class="" id="ordenar">
            <li id="1"><div class="checkFalse"></div>checkFalse teste1</li>
            <li id="0"><div class="checkTrue"></div>checkTrue teste0</li>
            <li id="2"><div class="checkFalse"></div>checkFalse teste2</li>
            <li id="4"><div class="checkFalse"></div>checkFalse teste4</li>
            <li id="3"><div class="checkTrue"></div>checkTrue teste3</li>
            <li id="5"><div class="checkTrue"></div>checkTrue teste5</li>
        </ul>

如果有人可以帮助我，我将永远感激不尽。干杯!!!

Answer 1

我想我现在就明白了，这里有一些东西可以在没有插件的情况下对你的元素进行排序。

FIDDLE

var ul=$("#ordenar");

function sortList(ul, order) {
    var list=ul.children("li").get();
    switch(order) {
        case 'id' :
            list.sort(function(a, b) {
               var compA = $(a).attr('id'), compB = $(b).attr('id');
               return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
            });
            $.each(list, function(idx, itm) { ul.append(itm); });
            break;
        case 'class=True' :
            list.sort(function(a, b) {
                var compA = $(b).children(':first').attr('class'), 
                    compB = $(a).children(':first').attr('class');
               return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
            });
            $.each(list, function(idx, itm) { ul.append(itm); });
            break;
        case 'class=False' :
            list.sort(function(a, b) {
                var compA = $(a).children(':first').attr('class'), 
                    compB = $(b).children(':first').attr('class');
               return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
            });
            $.each(list, function(idx, itm) { ul.append(itm); });
            break;
        case 'one-up' :
            $.each(list, function() {
                if ($(this).children(':first').hasClass('checkTrue')) {
                    var prev = $(this).prev();
                    if (prev.length&&prev.children(':first').hasClass('checkFalse')) {prev.before($(this));}
                }
            });
            break;
        case 'one-down' :
            $.each(list, function() {
                if ($(this).children(':first').hasClass('checkTrue')) {
                    var next = $(this).next();
                    if (next.length&&next.children(':first').hasClass('checkFalse')) {next.after($(this));}
                }
            });
            break;
    }
}

然后在这些<a>元素上添加一些ID，并绑定点击次数，如果您遇到窗口问题，请使用preventDefault或者使用锚点时遇到其他问题。

$("#refresh").on('click', function() {sortList(ul, 'id');});
$("#to_top").on('click', function() {sortList(ul, 'class=True');});
$("#to_bot").on('click', function() {sortList(ul, 'class=False');});
$("#once_up").on('click', function() {sortList(ul, 'one-up');});
$("#once_down").on('click', function() {sortList(ul, 'one-down');});

如何通过单击链接或按钮重新排序ul li列表？

1 个答案: