javascript - 使用 javascript 将样式应用到最后一个元素(类 :column) in div having class:container

Question

我有以下代码:

<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>

现在我想为每个具有“container”类的 div 添加样式到最后一个 div(类:“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>

Answer 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];
}

IE 7 及更低版本不支持查询选择器 API。

如果 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 在缺少它的浏览器中的工作。