如何解决替代div背景颜色
| 我的结构如下:<div class=\"wrapper\"...>
<a href=\"#\"...>blah</a>
<div class=\"post\"...>stuff</div>
</div>
并在整个动态页面中重复几次。我想用两种颜色替换div类“ post”的背景颜色,但是CSS的nth-child伪类似乎只能用于直接顺序的项目。
有没有一种方法(CSS,Javascript,jQuery等)可以替换div背景颜色?
解决方法
jQuery的:odd和:even选择器非常方便:
$(\".post:even\").css(\"background-color\",\"blue\");
$(\".post:odd\").css(\"background-color\",\"red\");
HTML:
<div class=\"wrapper\">
<a href=\"#\">blah</a>
<div class=\"post\">stuff</div>
</div>
<div class=\"wrapper\">
<a href=\"#\">blah</a>
<div class=\"post\">stuff</div>
</div>
...
http://jsfiddle.net/thomas4g/uaYd9/2/
编辑:
非jQuery的快速JS方式:
var posts = document.getElementsByClassName(\"post\");
for(var i=0;i<posts.length;i++) {
posts[i].classList.add(i % 2 === 0 ? \"even\" : \"odd\");
//or
posts[i].style[\"background-color\"] = i % 2 === 0 ? \"blue\" : \"red\";
}
, jQuery的方式:
$(\'.post:even\').css(\'background-color\',\'green\');
$(\'.post:odd\').css(\'background-color\',\'red\');
, 通常,我要做的是在后端分配一个css类“ odd”或“ even”。例如,如果页面是用PHP动态生成的,则可以执行以下操作:
for ($i = 0; $i < count($rows); $i++) {
$css_class = \'wrapper \'; // Elements can have multiple css classes
$css_class .= $i % 2 == 0 ? \'row_odd\' : \'row_even\';
// generate html using class=\"$css_class\"...
}
然后在您的班级中定义您希望交替div具有的颜色。
.row_odd { background-color: white; }
.row_even { background_color: #e0e0ff; }
, 可以很容易地用jQuery:odd
和:even
选择器完成:
$(\".wrapper div.post:odd\").addClass(\'odd\');
$(\".wrapper div.post:even\").addClass(\'even\');
http://jsfiddle.net/niklasvh/fULRZ/
, .post:nth-child(odd)
不适合您吗?
, :even Selector
http://api.jquery.com/even-selector/
我希望这会帮助你
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。