5

javascript を使用して親の 3 つおきの要素を選択し、それに css クラスを追加しようとしています。私にはかなり単純に聞こえますが、うまくいきません。私はこのスレッドを見つけましたが、それはそれを成し遂げるのにとてもいいように見えましたが、私は私の試みがうまくいかなかったので、javascriptにとても悩まされています:

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

これをロードすると、何も起こりません。
修正、アイオープナー、ヒントをいただければ幸いです。
こんにちは、マリアン

4

4 に答える 4

8 
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-30T14:13:46.530 に答える
7

3 分の 1を決定する最も簡単な方法は、係数を計算するときに index に 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-25T20:33:42.933 に答える
0

これは要素のリストを返します:

document.getElementsByClassName("ParentsClassName")

リストを反復処理するか、インデックスを選択できます。

document.getElementsByClassName("ParentsClassName")[0].childNodes;
于 2012-04-30T14:16:06.997 に答える