CODEWITHSUNDEEP
javascriptjquerylistclick
user1309015
user1309015

Reputation: 89

How to reorder a ul li list by clicking on an link or button?

I need to move some selected items from a list by clicking on a link or button.

Giving 4 options to the user: Put all selected items once backward or forward, or instead put all to the top of the list or to the bottom of the list.

I found a Jquery plugin that I'm using called jquery.tinysort.js

Actually, I don't need to use this plugin, could be any plugin or code, just need to work properly.

Follow a link to see a demo http://jsfiddle.net/dkwZZ/

Follow the html code:

    <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>

When ALL SELECTED ONCE UP the order of the list should be:

        <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>

When ALL SELECTED ONCE DOWN the order of the list should be:

        <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>

I will be eternally grateful if someone can help me. Cheers!!!

Upvotes: 0

Views: 3039

Answers (1)

adeneo
adeneo

Reputation: 318182

I think I get it now, here's something that should sort your elements without a plugin.

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;
    }
}

Then stick some ID's on those <a> elements, and bind the clicks, use preventDefault if you're having issues with the window jumping to the top or other trouble with anchors.

$("#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');});

Upvotes: 1

Related Questions