大項目の子要素に小項目が複数あり、各大項目ごとに、小項目の3つおきにfloatを解除するクラス"clear"を追加したい。
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>
//ページロード時のイベントリスナを追加 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'; } } }