我不想用代码来混淆这个问题。这是我的 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/