Question

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

例如在Windows上

<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()将该元素重新添加到容器中。

Demo

<强> 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);
    }
});

根据操作系统更改div顺序

2 个答案: