JavaScript 按属性对所有其他子元素进行排序,但 (this)

标签 javascript jquery sorting dom

我不想用代码来混淆这个问题。这是我的 fiddle 。 http://jsfiddle.net/jaisfiddles/acdk1aLL/5/

这是嵌入式演示:

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

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

将所选内容移至顶部
    $(this).parent().prepend($(this));

这看起来可能是排序的,但实际上并非如此。

所以,我想我应该创建一个元素数组(从 1 开始而不是 0 开始,以获取从第二个元素开始的所有元素),方法是为它们分配一个类名“sort”,正如您将在 fiddle 上看到的那样。并对这个数组进行排序并附加父 DIV - vert-navbar。

最佳答案

您需要先排序,然后追加。这样可以保证将单击的项目移至顶部后顺序正确:

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>

关于JavaScript 按属性对所有其他子元素进行排序,但 (this),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30160468/

相关文章:

javascript - 如何找到位于给定 (X,Y) 位置的 DOM 节点? ( HitTest )

javascript - 如何为 JavaScript 字典创建和添加值

javascript - 单击时图像边框发生变化

javascript - 如何复制一个 div 及其内容,并将其附加到其他地方但保持原始隐藏

javascript - 如何使用 javascript/jquery 关注给定表的行?

javascript - 单击图像时将坐标附加到 div

Python:如何使冒泡排序的实现更加省时?

java - 对多个数组进行排序

javascript - 打开时 Bootstrap 选项卡不显示事件

python - 在python中保留顺序的同时进行排序