JQ 遍历元素并给相应元素增加class
2020-01-15 17:57:00 浏览：1479 作者：管理员
应用帝国后台做公共模板时，需要公共导航栏点击后，加载到对应的栏目列表，同时该栏目导航项添加背景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元素之前。暂未测！
