使用javascript向ul中的所有li父元素添加css类

我有如下html代码：

<ul class="dropdown-menu mega-dropdown-menu">
    <li class="should be = col-sm-4">
        <ul>
            <li class="should be = dropdown-header">Item0</li>
            <li><a href="#">Item1</a></li>
            <li><a href="#">Item2</a></li>
        </ul>
    </li>
    <li class="should be = col-sm-4">
        <ul>
            <li class="should be = dropdown-header">Item0</li>
            <li><a href="#">Item1</a></li>
            <li><a href="#">Item2</a></li>
        </ul>
    </li>
    <li class="should be = col-sm-4">
        <ul>
            <li class="should be = dropdown-header">Item0</li>
            <li><a href="#">Item1</a></li>
            <li><a href="#">Item2</a></li>
        </ul>
    </li>
</ul>

Item0






Item0






Item0

这段代码是从服务器端生成的，现在我的问题是，我如何将

col-sm-4

css类附加到所有

li

父元素，并使用javascript将css类

下拉标题添加到第一个
li
子元素？
普通javascript解决方案：
通过将所有适用的列表项存储在一个变量中（稍后可以在
for
循环中对该变量进行验证），我们可以迭代每个实例并添加所需的类

如果不需要整个javascript库或框架（如jQuery）来进行只需进行一次的琐碎更改，则最好使用此解决方案

代码片段演示：


//使用querySelectorAll和CSS子组合器选择器获取直系后代列表项子项
var listItems=document.querySelectorAll（'.dropdown menu>li'）；
//将类添加到for循环中的每个实例
对于（变量i=0；i




项目0






项目0






项目0