JavaScript按属性对所有其他子元素进行排序，但（this）

Question

I don't want to clutter this question with code. So here's my fiddle. http://jsfiddle.net/jaisfiddles/acdk1aLL/5/

And here is embedded demo:

 $(document).ready(function() { $(".tabs").on('click', function() { $(this).parent().prepend($(this)); var childDivs = $("div.tabs"); for (var i = 1;i<childDivs.length;i++){ $(childDivs[i]).addClass('sort'); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="body"> <div id="vert-navbar"> <div id="tab1" class="tabs"><p>TAB1</p></div> <div id="tab2" class="tabs"><p>TAB2</p></div> <div id="tab3" class="tabs"><p>TAB3</p></div> <div id="tab4" class="tabs"><p>TAB4</p></div> </div> <div id="main-content"></div> </div> 

The intention is to move a clicked-on DIV to top and sort all other child DIVs in alphabetical order. Eg. If TAB 3 is clicked on, move TAB 3 to top. And reorder the rest as TAB1, TAB2, TAB4. I've managed to bring the selection to the top using

    $(this).parent().prepend($(this));

This may seem sorted but not really.

So, I thought I'd create an array of elements (starting at 1 not 0 to get all elements starting with the second one) by assigning them a classname 'sort' as you'll see on the fiddle. And sort this array and append the parent DIV - vert-navbar.

Answer 1

You need to sort first and then append. This way it is guarantied that the order is correct after you move clicked item to the top:

 var $tabs = $(".tabs").on('click', function () { var $parent = $(this).parent(); $tabs.sort().appendTo($parent); $parent.prepend($(this)); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="body"> <div id="vert-navbar"> <div id="tab1" class="tabs"><p>TAB1</p></div> <div id="tab2" class="tabs"><p>TAB2</p></div> <div id="tab3" class="tabs"><p>TAB3</p></div> <div id="tab4" class="tabs"><p>TAB4</p></div> </div> <div id="main-content"></div> </div> 

Answer 2

You can first reset the block arrangement on each click event then just prepend the clicked div to the parent

$(document).ready(function() {
    $(".tabs").on('click', function() {
        reset();
        $(this).parent().prepend($(this));

    });
});
function reset(){
    var childDivs = $("div.tabs");
    for (var i = childDivs.length;i>0;i--){
        $("#vert-navbar").prepend($("#tab"+i));
    }
}

check the fiddle

Answer 3

    $(document).ready(function() {
        $(".tabs").on('click', function() {
            $(this).parent().prepend($(this));
            var orderlist = $("#vert-navbar .tabs").slice(1).sort(function(a,b){
                if($(a).find("p").text()<$(b).find("p").text()){
                    return -1;
                }
                else if($(a).find("p").text()>$(b).find("p").text()){
                    return 1;
                }
                return 0;
            });
            orderlist.splice(0,0,$("#vert-navbar .tabs").eq(0)[0]);
            $("#vert-navbar").append(orderlist);
        });
    });

Demo: http://jsfiddle.net/acdk1aLL/6/

Reorder the rest of the list and then add new first element.

Answer 4

You can use the sort method on the remainder of the tabs and then append them to the parent of the clicked element as follows.

 $(document).ready(function() { $(".tabs").on('click', function() { $(this).parent().prepend( $(this) ) .append( $("div.tabs").not( this ).sort(function(a,b) { return $('p',a).text() > $('p',b).text() ? 1 : $('p',b).text() > $('p',a).text() ? -1 : 0; }) ); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="body"> <div id="vert-navbar"> <div id="tab1" class="tabs"><p>TAB1</p></div> <div id="tab2" class="tabs"><p>TAB2</p></div> <div id="tab3" class="tabs"><p>TAB3</p></div> <div id="tab4" class="tabs"><p>TAB4</p></div> </div> <div id="main-content"></div> </div>