前端学习笔记(zepto或jquery)——对li标签的相关操作（四）

对li标签的相关操作——五种方式给奇数项li标签设置样式

demo演示：

• 1
• 2
• 3
• 4
• 5
• 6
• 7

 

详解：

通常我们为多个li添加样式时常用的是使用filter，但我们在第三节中可以看到filter可以和each等在某些场合替换的，那是否我们可以用each来实现呢，答案是肯定的，但也是有差异性的。

下面是常用的三种方式处理：

$('ul').children().filter(function(index){return index%2 == 0;}).css('background-color', 'red');

$('ul').children().filter('li:nth-child(odd)').css('background-color', 'red');

$('ul').contents().filter('li:nth-child(2n+1)').css('background-color', 'red');

        $("ul>li").not(function(index){return index%2==1;}).css('background-color', 'red');

以下使用each处理的：

$('ul>li').each(function(index){return index%2 == 0;}).css('background-color', 'red'); 

但我们运行后发现所有的li标签均变为红色，也就是说他并没有按照我们想要的方式显示。实际上他并没有将函数返回的相应结果进行样式添加。那是否each不可实现了？下面我们执行下来的代码就会达到我们想要的要求。

$('ul>li:nth-child(odd)').each(function(){}).css('background-color', 'red');