JQ 遍歷元素並給相應元素增加class

應用帝國后台做公共模板時，需要公共導航欄點擊后，加載到對應的欄目列表，同時該欄目導航項添加背景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元素之前。暫未測！