Javascriptですべての3番目の要素にクラスを追加します。

Question

javascriptを使用して親のすべての3番目の要素を選択し、CSSクラスを追加しようとしています。かなりシンプルな音ですが、私はそれを動作させることはできません。 私はそれを成し遂げるために私にはかなりいい感じthisスレッドを見つけましたが、私は私の試みはうまくいかなかったJavaScriptを使用して、このようなwussだ：

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

私はこれをロードすると、何もまったく起こりません。
修正、アイ開口窓とヒントは高く評価されています。
挨拶、マリアン

Answer 1

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") 
     } 
    } 
} 

Answer 2

を持つ。これは、要素のリストを返します。

document.getElementsByClassName("ParentsClassName") 

あなたは、リストを反復処理する、またはインデックスを選択することができ、次のいずれか

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

Answer 3

あなたは純粋なCSSでそれを行うことができます。 Javascriptのは必要ありません。）

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

Answer 4

私はモジュラスを行う際に、インデックスに1を追加することで、すべての第三を決定するための最も直接的なアプローチことが判明：

var nodes = //get nodes 

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

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