评论

收藏

[jQuery] jQuery之each方法

开发技术 开发技术 发布于:2021-08-06 12:53 | 阅读数:310 | 评论:0

代码:
<script>
  $(document).ready(function(){
    //检测是否有lesson_id传入
    var lesson_id = "<!--{$lessonId}-->";
    if(lesson_id>0){
      $('.cursor').each(function(i){
        if($(this).attr('val') == lesson_id){
          $(this).removeClass('cj_li').addClass('fw');//没有的话就不移除,有的话就不重复添加,多次点击依旧如此
          $(this).siblings('.cursor').removeClass('fw').addClass('cj_li');
        }
      });
    }
    
    //切换查看
    $(".cursor").click(function(){
      $(this).removeClass('cj_li').addClass('fw');//没有的话就不移除,有的话就不重复添加,多次点击依旧如此
      $(this).siblings('.cursor').removeClass('fw').addClass('cj_li');
      //获取type
      var type = $("input[name=type]").val();
      //获取sequence
      var sequence = $("input[name=sequence]").val();
      //获取sequence_name
      var sequence_name = $("#seqName").text();
      //获取lesson_id值
      var lesson_id = $(this).attr('val');
      if("undefined"==typeof(lesson_id)){
        //获取全科排名
        if(type!=null&&sequence!=null&&sequence_name!=null){
          location.href=("/exams/teacher/showclassstat/sequence/"+sequence+"/type/"+type+"/sequence_name/"+sequence_name);
        }
      }else{
        //获取单科排名
        if(type!=null&&sequence!=null&&sequence_name!=null&&lesson_id!=null){
          location.href=("/exams/teacher/showclassstat/sequence/"+sequence+"/type/"+type+"/sequence_name/"+sequence_name+"/lesson_id/"+lesson_id);
        }
      }
      
      
      
    });
  });
</script>
解析:
1 $('.cursor').each(function(i){
2         if($(this).attr('val') == lesson_id){
3           $(this).removeClass('cj_li').addClass('fw');//没有的话就不移除,有的话就不重复添加,多次点击依旧如此
4           $(this).siblings('.cursor').removeClass('fw').addClass('cj_li');
5         }
6       });
这里用到了each方法
对类名为cursor的元素集进行一一处理,
$(this)就代表这次循环的当前对象,
如果其属性的值与lesson_id相等,就进行样式处理。
正如注释所言,removeClass,如果没有可移除属性,就不移除。有点话,不会多次添加。


关注下面的标签,发现更多相似文章