javascript - 根据操作系统更改 div 顺序

Question

我想根据操作系统更改 div 顺序。

例如在窗户上

<div class="first"> </div>
<div class="second"> </div>
<div class="third"> </div>

在 Mac 上

<div class="third"> </div>
<div class="first"> </div>
<div class="second"> </div>

我有一些这个js来显示和隐藏一个div，如果我使用父div没问题，但我宁愿重新排序。

if (navigator.appVersion.indexOf("Mac") > -1) {
    $('#windows').hide();
    $('#mac').show();
}

Answer 1

这是一种方法：

if (navigator.appVersion.indexOf("Mac") > -1) {
    $('.third').insertBefore('.first');
}

还有.insertAfter()你可以使用的。我会使用这些方法进行基本的重新排序，就像你的例子中看到的那样。如果需要大量重新排序，我认为不同的方法可能会更好，例如@Daniel 的示例

Answer 2

对于更通用的解决方案，您可以将每个平台的订单存储在一个数组中，然后遍历数组并使用$.appendTo().

演示

HTML

<div id="container">
    <div class="first">1</div>
    <div class="second">2</div>
    <div class="third">3</div>
</div>

JS

var macOrder = [".third", ".first", ".second"];

$(function () {
    var container = $('#container');
    for (var i = 0; i < macOrder.length; i++) {
        $(macOrder[i]).appendTo(container);
    }
});