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

debugcn 发表于 Dev

周刊

我有这样的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>

这段代码是从服务器端生成的，现在我的问题是，如何将col-sm-4css 类附加到所有li父元素并使用 javascript将 css 类添加dropdown-header到第一li个子元素？

未捕获类型错误

原生 Javascript 解决方案：

通过将所有适用的列表项存储在一个变量中，稍后可以在for循环中使用该变量，我们可以遍历每个实例并添加所需的类。

如果不需要整个 javascript 库或框架（如 jQuery）来进行只需要发生一次的微不足道的更改，则此解决方案是可取的。

代码片段演示：

// Get direct descendant list-item children using querySelectorAll and CSS child combinator selector 
var listItems = document.querySelectorAll('.dropdown-menu > li');

// Add class to each instance in for loop
for(var i = 0; i < listItems.length; i++) {
  listItems[i].className = 'col-sm-4';
}

// Get first list-item child of nested ul element with class name "col-sm-4" using querySelectorAll and CSS :first-child pseudo-selector  
var headerListItems = document.querySelectorAll('.dropdown-menu .col-sm-4 li:first-child');

// Add class to each instance in for loop
for(var i = 0; i < listItems.length; i++) {
  headerListItems[i].className = 'dropdown-header';
}

// Note: "querySelectorAll" allows for the ability to specify selectors using CSS Selector Syntax

<ul class="dropdown-menu mega-dropdown-menu">
    <li >
        <ul>
            <li>Item0</li>
            <li><a href="#">Item1</a></li>
            <li><a href="#">Item2</a></li>
        </ul>
    </li>
    <li >
        <ul>
            <li >Item0</li>
            <li><a href="#">Item1</a></li>
            <li><a href="#">Item2</a></li>
        </ul>
    </li>
    <li >
        <ul>
            <li >Item0</li>
            <li><a href="#">Item1</a></li>
            <li><a href="#">Item2</a></li>
        </ul>
    </li>
</ul>

jQuery 解决方案：

考虑使用该.addClass()方法通过指定预期的选择器来添加所需的类，如下面的嵌入式代码片段所示。

如果此更改需要不止一次或在类似范围内的其他地方发生，则此解决方案更可取。

代码片段演示：

jQuery('.dropdown-menu > li').addClass('col-sm-4');

jQuery('.dropdown-menu .col-sm-4 li:first-child').addClass('dropdown-header');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="dropdown-menu mega-dropdown-menu">
    <li >
        <ul>
            <li>Item0</li>
            <li><a href="#">Item1</a></li>
            <li><a href="#">Item2</a></li>
        </ul>
    </li>
    <li >
        <ul>
            <li >Item0</li>
            <li><a href="#">Item1</a></li>
            <li><a href="#">Item2</a></li>
        </ul>
    </li>
    <li >
        <ul>
            <li >Item0</li>
            <li><a href="#">Item1</a></li>
            <li><a href="#">Item2</a></li>
        </ul>
    </li>
</ul>