算法遍历问题

Question

                    <ul>
                        <li>
                            <a href="#" target="_blank">
                                <span>通知后台管理</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" target="_blank">
                                <span>新闻动态后台管理</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" target="_blank">
                                <span>工具后台管理</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" target="_blank">
                                <span>全部应用后台管理</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" target="_blank">
                                <span>广告后台管理</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" target="_blank">
                                <span>通讯录后台管理</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" target="_blank">
                                <span>民生专题后台管理</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" target="_blank">
                                <span>活动后台管理</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" target="_blank">
                                <span>帮助后台管理</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" target="_blank">
                                <span>门户后台管理</span>
                            </a>
                        </li>
                    </ul>
                    
                    我只想给第1 2 3 4 6 7 8 9 11 12 13 14 16 17 18 19。。。上的li加样式，我怎么写js循环遍历？

Answer 1

用css就能做到，为什么要用js。

ul li:not(:nth-child(5n + 5)) {
    color: red;
}

或者

ul li {
    color: red;
}
ul li:nth-child(5n + 5){
    //覆盖上面的样式。
}

Answer 2

这个谈不上是算法遍历。写了一个原生js的方法，性能肯定不是最优的

var _ul = document.querySelector("ul"); //ul 最好加个class或者id 不然就会找到第一个声明的ul
var _li = _ul.querySelectorAll("li");
for (var a = 0; a < _li.length; a++) {
    li[a].setAttribute("style", "background-color: yellow");
    //也可以声明一个类，然后挂上这个类
    //_li[a].classList.add("bg");
}

Answer 3

// Jquery 选择器
// 选择器选取索引值小于指定数字的元素。
// :lt(n) n 代表元素索引 从 0 开始
$("li:lt(19)"); // 前19个li元素

// 不包括5的倍数 （n 表示包括 0 在内的自然数）
$('li').not(':nth-child(5n + 5)'); 

Answer 4

首先从场景出发，为什么你会有这样的需求，我猜测是你写死了DOM？为什么不把侧边栏的属性写成json配置，通过模板引擎或者js去生成。可能是我理解偏激了，但是这种问题的提出其实隐含着设计上更大的纰漏