使用Javascript爲每個第三個元素添加類

我試圖選擇使用javascript的父元素的每個第三個元素，併爲其添加一個css類。聽起來很簡單，但我無法得到它的工作。我發現this線程看得出來非常高興我弄完，但我用JavaScript這麼膽小，我的嘗試沒有成功：使用Javascript爲每個第三個元素添加類

var nodes = document.getElementsByClassName("ParentsClassName").childNodes; 
for(i=0; i<nodes.length; i+=3) { 
    this.className += ' newClassName'; 
}

當我打開這個，什麼都不會發生在所有。
任何修補程序，eyeopeners和技巧讚賞。
問候，瑪麗安

來源

2012-04-30 Marian

var parents = document.getElementsByClassName("someClass"), 
    forEach = Array.prototype.forEach.call.bind(Array.prototype.forEach), 
    filter = Array.prototype.filter.call.bind(Array.prototype.filter) 

forEach(parents, addClassToEveryThirdChild) 

function addClassToEveryThirdChild(parent) { 
    filter(parent.children, selectEveryThirdChild) 
     .forEach(addSomeClass) 
} 

function selectEveryThirdChild(elem, i) { 
    return i % 3 === 0 
} 

function addSomeClass(elem) { 
    elem.classList.add("newClassName") 
}

或用循環

var parents = document.getElementsByClassName("someClass") 

for (var i = 0, ii = parents.length; i < ii; i++) { 
    var parent = parents[i], 
     children = parent.children 

    for (var j = 0, jj = children.length; j < jj; j++) { 
     var elem = children[j] 
     if (j % 3 === 0) { 
      elem.classList.add("newClassName") 
     } 
    } 
}

來源

2012-04-30 14:13:46 Raynos

+1這個答案是正確的。雖然我沒有看到'filter'和'forEach'的好處。 – 2012-04-30 14:16:17

@amnotiam減少過濾器和forEach爲一個語句是一個微觀優化。當然你可以使用if for eachEach。 – Raynos

不擔心優化。只是更乾淨的代碼希望我可以給另一個+1，以便在StackOverflow上省略分號。 – 2012-04-30 14:20:10

這將返回元素的列表：

document.getElementsByClassName("ParentsClassName")

您可以在列表上迭代，或者選擇一個指標：

document.getElementsByClassName("ParentsClassName")[0].childNodes;

來源

2012-04-30 14:16:06

你可以用純CSS做。不需要的Javascript）

實施例：.parent .child:nth-of-type(3n+3)

來源

2015-02-25 11:12:17 user3564943

我發現於確定每第三最直接方法，就是做模量時，以1添加到索引：

var nodes = //get nodes 

for(var i = 0; i < nodes.length; i++) { 
    var isThirdIteration = (i + 1) % 3 === 0; 

    if (isThirdIteration) { 
    this.className += ' newClassName'; 
    } 
}

來源

2016-10-25 20:33:42 contactmatt

這很簡單，對我來說效果很好。 – whyAto8

使用Javascript爲每個第三個元素添加類

回答

相關問題