我有以下代码:
<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>
最佳答案
你可以尝试这样的事情:
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 在缺少它的浏览器中的工作。
关于javascript - 使用 javascript 将样式应用到最后一个元素(类 :column) in div having class:container,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19852180/