如何使用javascript按順序為div分配類？

Question

我試着尋找答案，但沒有快樂 - 我是JS的新手（就像上周開始學習的那樣），我遇到了一個我甚至不知道在哪里開始解決的問題。

我有一個帶有id container的div ，里面有很多帶有類item的小div。 我想給那些.item S的額外類tile1的第一個div， tile2第二， tile3第三， tile4第四，然后回到tile1第五， tile2第六等。

#container的.tile s的數量將動態生成，可能使用無限滾動的航點，這使我想要使用javascript來執行此操作，而不是手動鍵入這些類。

誰能給我一些指示？

謝謝！

Answer 1

這是一個jsbin演示

---

jQuery .each是你的朋友

$("#container .item").each(function(idx, elem) {
  $(elem).addClass("tile" + (idx + 1));
});

---

編輯

我沒有看到你想要瓦片編號

$("#container .item").each(function(idx, elem) {
  $(elem).addClass("tile" + (idx % 4 + 1));
});

Answer 2

您可以使用.addClass()方法和模數運算符：

$('#container .item').addClass(function(i) { 
    return 'tile' + (i % 4 + 1);
});

http://jsbin.com/evuFOqUd/3/edit

或者如果您不使用jQuery：

[].forEach.call(
  document.querySelectorAll('#container .item'), 
  function(el, i) {
    el.classList.add('tile' + (i % 4 + 1));
  }
);

這僅適用於現代瀏覽器。

Answer 3

一種非jQuery方法（原諒偽代碼）：

var breakAfter = 4; // Reset iterator after reaching 5 runs
var iterator = 0;
var elementList = document.querySelector(".myk00lElementClass"); // Your DOM nodes
for (element in elementList) { 

    element.classList.add('dynamicClass_' + iterator);

    // Reset dynamic class number if we have reached arbitrary length above
    if (iterator >= breakAfter) {
        iterator = 0;

    // Or, keep on truckin'
    } else {
        iterator++;
    }
}