Question

我不想用代码来混淆这个问题。所以这就是我的小提琴。 http://jsfiddle.net/jaisfiddles/acdk1aLL/5/

这是嵌入式演示：

＆＃13;

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

＆＃13;

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

＆＃13;

目的是将点击的DIV移到顶部，并按字母顺序对所有其他子DIV进行排序。例如。如果单击TAB 3，则将TAB 3移至顶部。并将其余部分重新排序为TAB1，TAB2，TAB4。我已设法使用

将选择带到顶部

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

这可能看起来有点但不是真的。

所以，我认为我创建了一个元素数组（从1开始而不是0以从第二个开始获取所有元素），为它们分配一个类名＆＃39; sort＆＃39;正如你在小提琴上看到的那样。并对此数组进行排序并附加父DIV - vert-navbar。

Answer 1

您需要先排序，然后追加。这样，在将点击的项目移到顶部后，保证订单正确无误：

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

您可以先在每次点击事件中重置块排列，然后将单击的div添加到父

之前

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

检查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);
        });
    });

演示：http://jsfiddle.net/acdk1aLL/6/

重新排序列表的其余部分，然后添加新的第一个元素。

Answer 4

您可以在其余选项卡上使用sort方法，然后将append方法用于所点击元素的父级，如下所示。

＆＃13;

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

＆＃13;

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

＆＃13;

JavaScript按属性排序所有其他子元素但是（this）

4 个答案: