javascript - HTML 元素从前到后

Question

任何人想到一个更好/更干净/更快的方法来安排 DOM 元素(请只使用 vanilla javascript):

var frontBackList = [];

function frontBackProc(dir, elem, baseZ) {
  baseZ = baseZ || 100;
  var id = elem.id;
  if (!id) {
    id = elem.id = "rand" + (new Date().getTime());
  }

  if (!~frontBackList.indexOf(id)) {
    frontBackList.push(id);
  }

  var see = 0; // dev
  var loZ = 100000; // max Z is something like 64,000
  var hiZ = -100000;
  for (var i = frontBackList.length; i--;) {
    var el = document.getElementById(frontBackList[i]);

    if (!el) {
      frontBackList.slice(i, 1); // remove missing
    } else {
      var z = Number(el.style.zIndex) || 0;

      if (z <= loZ) {
        loZ = z;
      }
      if (z > hiZ) {
        hiZ = z;
      }
      // dev
      el.style.left = 20 * see + "px";
      el.style.top = 20 * see + "px";
      see++;
    }

  }

  if (dir > 0) {
    elem.style.zIndex = hiZ + 1;
  } else {
    elem.style.zIndex = loZ - 1;
  }


  console.log("bob", elem.style.zIndex);

}

function toFront(elem, baseZ) {
  frontBackProc(1, elem, baseZ);
}

function toBack(elem, baseZ) {
  frontBackProc(-1, elem, baseZ);
}
toFront(document.getElementById("red"));
toFront(document.getElementById("green"));
toFront(document.getElementById("blue"));
toFront(document.getElementById("yellow"));
toFront(document.getElementById("cyan"));

toBack(document.getElementById("blue"));
toFront(document.getElementById("red"));
toFront(document.getElementById("yellow"));
toBack(document.getElementById("red"));

.box {
  left: 20px;
  top: 20px;
  width: 30px;
  height: 30px;
  display: inline-block;
  position: absolute;
}

.red {
  background-color: red;
}

.green {
  background-color: green;
}

.blue {
  background-color: blue;
}

.yellow {
  background-color: yellow;
}

.cyan {
  background-color: cyan;
}

<div id="red" class="box red">red</div>
<div id="green" class="box green">green</div>
<div id="blue" class="box blue">blue</div>
<div id="yellow" class="box yellow">yellow</div>
<div id="cyan" class="box cyan">cyan</div>

Answer 1

如果唯一的目的只是按照某种模式排列盒子，就会有大量不必要的东西。我假设您的目标是:

1. 将盒子对 Angular 排列
2. 上下排列方框
3. 将它们倒序放置

通常 SO 主要关注的是损坏的代码，而您的不是，但是有 a site that members analyze working code and help improve it正如我想我刚刚完成的那样，但它很有趣，谢谢。

---

Demo中有详细说明

演示

/* 
|queryselectorAll()
|| Collect all .box into a NodeList
|Array.from()
|| Convert NodeList into an array
|reverse()
|| Reverse the order of array
*/
var boxes = Array.from(document.querySelectorAll('.box')).reverse();

/* 
|map() will run a function on each element of array
|| if the current index is an even number...
|| give it a z-index of 1
|| otherwise give it a z-index of 2
|| Add a diagonal distance to each element which is
|| incremented by index
*/
boxes.map(function(box, idx, boxes) {
  if ((idx % 2) === 0) {
    box.style.zIndex = 1;
  } else {
    box.style.zIndex = 2;
  }
  box.style.left = 20 * idx + 'px';
  box.style.top = 20 * idx + 'px';
});

.box {
  left: 20px;
  top: 20px;
  width: 30px;
  height: 30px;
  display: inline-block;
  position: absolute;
}

.red {
  background-color: red;
}

.green {
  background-color: green;
}

.blue {
  background-color: blue;
}

.yellow {
  background-color: yellow;
}

.cyan {
  background-color: cyan;
}

.lime {
  background-color: lime;
}

<div class="box red">red</div>
<div class="box green">green</div>
<div class="box blue">blue</div>
<div class="box yellow">yellow</div>
<div class="box cyan">cyan</div>
<div class='box lime'>Lime</div>