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

时间:2022-01-27 16:41:56

对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');