大項目の子要素に小項目が複数あり、各大項目ごとに、小項目の3つおきにfloatを解除するクラス”clear”を追加したい。

diary


HTML



<!-- 大項目1 -->

<div class="daikoumoku">

<div class="syoukoumoku"></div>

<div class="syoukoumoku"></div>

<div class="syoukoumoku"></div>

<div class="syoukoumoku"></div>

<div class="syoukoumoku"></div>

<div class="syoukoumoku"></div>

<div class="syoukoumoku"></div>

<div class="syoukoumoku"></div>

<div class="syoukoumoku"></div>

</div>

<!-- 大項目2 -->

<div class="daikoumoku">

<div class="syoukoumoku"></div>

<div class="syoukoumoku"></div>

<div class="syoukoumoku"></div>

<div class="syoukoumoku"></div>

</div>

<!-- 大項目3 -->

<div class="daikoumoku">

<div class="syoukoumoku"></div>

<div class="syoukoumoku"></div>

<div class="syoukoumoku"></div>

<div class="syoukoumoku"></div>

<div class="syoukoumoku"></div>

<div class="syoukoumoku"></div>

<div class="syoukoumoku"></div>

</div>

javascript



//ページロード時のイベントリスナを追加

if (window.addEventListener) { /* Firefox */

window.addEventListener("load", fxClassClr, false);

}

else if (window.attachEvent) { /* IE */

window.attachEvent("onload", fxClassClr);

}

else {

window.onload = fxClassClr;

}

function fxClassClr() {

//大項目の要素を取得

var elem = document.querySelectorAll('div.daikoumoku');

//大項目の要素数を取得

var len = elem.length;

//大項目の要素数分回す

for (var i=0; i<len; i++){

//大項目ごとに小項目の要素を取得

var elemi = elem[i].querySelectorAll('div.syoukoumoku');

//大項目ごとに小項目の要素数を取得

var leni = elemi.length;

//大項目ごとに小項目の要素数分回す

for(var j=0; j<leni;j++){

//インデックスを3で割った余りを求める

var k = j%3;

//インデックスを3で割った余りが0のとき

if(k == '0')

//クラス名をsyoukoumoku clearにする

elemi[j].className = 'syoukoumoku clear';

}

}

}