码迷,mamicode.com
首页 > 其他好文 > 详细

JQ 遍历元素并给相应元素增加class

时间:2020-01-15 19:29:49      阅读:150      评论:0      收藏:0      [点我收藏+]

标签:元素   cal   text   hasclass   ali   cat   添加   思路   点击   

应用帝国后台做公共模板时,需要公共导航栏点击后,加载到对应的栏目列表,同时该栏目导航项添加背景class

思路:使用location.href获取到当前页链接,使用split切割获取的链接字符串,使用切割后得到的关键词匹配对应栏目class,遍历该class,同时给该class增加对应样式

重点:1.location.href

           2.str.split(‘syb‘)

           3.$el.each(function(){})

<div class="menu_scroll">
        <div class="menu_items">
               <div class="item_cell active" data-url="index">
                    <a href="/" data-title="首页">首页</a>
               </div>
               <div class="item_cell yys" data-url="yys">
                    <a href="/yys/" data-title="应用">应用</a>
               </div>
               <div class="item_cell yxs" data-url="yxs">
                     <a href="/yxs/" data-title="游戏">游戏</a>
               </div>
               <div class="item_cell zts" data-url="zts">
                     <a href="/zts/" data-title="专题">专题</a>
               </div>
               <div class="item_cell zxs" data-url="zxs">
                     <a href="/zxs/" data-title="资讯">资讯</a>
                </div>
                <div class="item_cell jcs" data-url="jcs">
                     <a href="/jcs/" data-title="教程">教程</a>
                </div>
                <div class="item_cell hots" data-url="hots">
                     <a href="/hots/" data-title="热门标签">热门</a>
                </div>
        </div>
</div>

<script type="text/javascript">
 $(".item_cell").removeClass(active);
        const localUrl= location.href;//获取当前页链接
        console.log(localUrl);                
                var clsDatArr =localUrl.split("/");//切割链接组成数组
                var clsNam = clsDatArr[3];获取关键字符
                console.log(clsNam);
$(function(){
   $(".item_cell").each(function(){
     if($(this).hasClass(clsNam)){
          $(this).addClass(active)
     }
   });
});            
</script>

注意:需要在function中增加点击首页时候,获取关键字符为空的情况,应该预先判断是否为空,加在遍历li元素之前。暂未测!

JQ 遍历元素并给相应元素增加class

标签:元素   cal   text   hasclass   ali   cat   添加   思路   点击   

原文地址:https://www.cnblogs.com/chig/p/12198048.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!