zoukankan      html  css  js  c++  java
  • 前端学习笔记(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');
  • 相关阅读:
    第05组 Alpha冲刺 (6/6)
    第05组 Alpha冲刺 (5/6)
    第五次作业
    第05组 Alpha冲刺 (4/6)
    第05组 Alpha冲刺 (3/6)
    第05组 Alpha冲刺 (2/6)
    第05组 Alpha冲刺 (1/6)
    第四次作业
    差分约束
    置换群的性质与burnside引理
  • 原文地址:https://www.cnblogs.com/xuhang/p/4228206.html
Copyright © 2011-2022 走看看