Question

我有一个设置类似如下的nodeList：

<div id="container">
  <div class="class-a"></div>
  <div class="class-a"></div>
  <div class="class-a"></div>
  <div class="class-b"></div>
  <div class="class-b"></div>
  <div class="class-b"></div>
</div>

我正在尝试重新排序#container中的div，使得输出是交替的类名：

<div id="container">
  <div class="class-a"></div>
  <div class="class-b"></div>
  <div class="class-a"></div>
  <div class="class-b"></div>
  <div class="class-a"></div>
  <div class="class-b"></div>
</div>

处理此问题的最佳方法是什么？虽然在这个例子中有相同的class-a和class-b项，但是可以有任何数量或者没有任何数量。只要两者中的任何一个都会交替。

Answer 1

这里有我怎么做，虽然可能有一种更简单的方法。

  var divs = $("#container > div"); // get the divs in #container
  var length = divs.length; // get the length once and reuse it

  for (var i = 0; i < length; i++) {
    var currentClass = (i % 2 === 0) ? "class-a" : "class-b"; // class-a for evens. class-b for odds

    if (!$(divs[i]).hasClass(currentClass)) { // if not currentClass
      for (var j = i + 1; j < length; j++) { // loop through remaining divs
        if ($(divs[j]).hasClass(currentClass)) { // find next div with currentClass
          // move next element with currentClass from index j to index i
          var element = divs[j];
          divs.splice(j, 1);
          divs.splice(i, 0, element);
          break; // break inner loop
        }
      }
    }
  }

  $("#container").empty().append(divs);

JSFiddle

或者根据类重新排序nodeList

1 个答案: