1

私は次のコードを持っています：

<div class="container">
 <div class="four column">some text</div>
 <div class="eight column">some text</div>
</div>
<div class="container">
 <div class="six column">some text</div>
 <div class="six column">some text</div>
</div>
<div class="container">
 <div class="twelve column">some text</div>
</div>

ここで、クラス「コンテナ」を持つ各 div の最後の div (class:'column') にスタイルを追加したいので
、javascript を使用してそれを行う必要があります。jquery はありません。したがって、コードは次のようになります。

<div class="container">
 <div class="four column">some text</div>
 <div class="eight column" style='margin-right:0px;'>some text</div>
</div>
<div class="container">
 <div class="six column">some text</div>
 <div class="six column" style='margin-right:0px;>some text</div>
</div>
<div class="container">
 <div class="twelve column" style='margin-right:0px;>some text</div>
</div>
4

2 に答える 2

1

次のようなものを試すことができます：

var containerDivs = document.querySelectorAll('.container');

for (var i=0, iLen=containerDivs.length; i<iLen; i++) {

  var columnElements = containerDivs[i].querySelectorAll('.column');
  var last = columnElements[columnElements.length - 1];
}

クエリ セレクター API は、IE 7 以前ではサポートされていません。

IE 8 が for ループ内でもう少し洗練されている場合は、次を使用できる可能性があります。

var last = containerDivs[i].querySelector('.column:last-of-type');

または、ループを完全に削除することもできます:

var lastColumns = document.querySelectorAll('.container > .column:last-of-type');

また、純粋な CSS を使用できます。

.container > .column:last-of-type {
  margin-right:0px;
}

IE 8もそれをサポートしていません。getElementsByClassNameが欠けているブラウザーでgetElementsByClassNameの作業を行うためのループと関数を使用して実行できます。

于 2013-11-08T06:00:15.530 に答える
0

これを使用できます：

document.getElementsByClassName("container").lastElementChild.style.marginRight = "0px";
于 2013-11-08T05:34:56.320 に答える