Question

不改变布局，怎样用js实现背景效果？？li是循环输出的，两个li一行，再隔行换背景色

<div style="width:500px; margin:0px auto;">
<ul style="width:500px; float:left;">
<li style="width:250px; float:left; background:#eee;"></li>
<li style="width:250px; float:left; background:#eee;"></li>
<li style="width:250px; float:left;"></li>
<li style="width:250px; float:left;"></li>
<li style="width:250px; float:left; background:#eee;"></li>
<li style="width:250px; float:left; background:#eee;"></li>
<li style="width:250px; float:left;"></li>
<li style="width:250px; float:left;"></li>
<li style="width:250px; float:left; background:#eee;"></li>
<li style="width:250px; float:left; background:#eee;"></li>
<li style="width:250px; float:left;"></li>
<li style="width:250px; float:left;"></li>
</ul>
</div>

Answer 1

下面是效果

 

原理就是循环出0，1，4，5，8，9，12，13.。。。。这些位置的li，再设置样式，

循环逻辑是i*4   及i*4+1  

最好是在n>a.length的时候，break一下

Answer 2

用jquery：

$(function(){
    $('ul li').each(function(idx){
        var idx = idx + 1;
        // 奇数行
        if( Math.ceil( idx / 2 ) % 2 ) 
            $(this).css({'backgroundColor':'#ccc'});
        // 偶数行
        else
            $(this).css({'backgroundColor':'#999'});
    });
});

不用jquery

window.onload=function() {
    var uls = document.getElementsByTagName('ul'),
        ul=uls[0], // 假设文档里多个 ul 元素，要操作的是第一个 ul，
        lis = ul.children,
        len=lis.length,
        idx = 0,
        e = null;
    for(var i=0; i<len; i++) {
        idx = i + 1;
        e = lis[i];
        // 奇数行
        if( Math.ceil( idx / 2 ) % 2 ) 
            e.style.backgroundColor='#ccc';
        // 偶数行
        else
            e.style.backgroundColor='#999';
    }
}

Answer 3

给你的ul设置个id如： id="lilist"
将以下代码加入
<script>
window.onload=function(){
var list = document.getElementById("lilist").getElementsByTagName("li");
var len = list.length;
var i = 0;
while(i<len){
list[i].style.background = "#eee";
list[i+1].style.background = "#eee";
list[i+2].style.background = "#000";
list[i+3].style.background = "#000";
i=i+4;
}
}
</script>

Answer 4

跟你来简单点的：
把你要改变颜色的li标签里面加一个class=“a”和class=“b”，因为你有两个颜色嘛，每个颜色加一个， 所以弄个a和b,然后得到所有为a的标签 如：$("#li" .a"); 最后你就可以设置这个便签的任何样式了，
b的话 也按这个步骤来吧

希望能帮助你 ，

Answer 5

$('li:even').css('background', 'red');  // 获取偶数位置的li标签
$('li:odd').css('background', 'blue');  // 获取奇数位置的li标签