使用javascript

Question

我有这样的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-4 css类附加到所有li个父级，并将css类dropdown-header添加到第一个{{1}使用javascript的子元素？

Answer 1

只需这样做：

＆＃13;

＆＃13;

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


$('.dropdown-menu > li ul li').eq(0).addClass("dropdown-header");

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

Vanilla 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>

替代方案：标准CSS选择器语法

仍然可以使用CSS Selector语法使用以下方法定位相关元素：

对于什么是“col-sm-4”：.dropdown-menu > li
使用子组合器（>）选择第一个直接后代list-item元素

对于什么是“dropdown-header”：.dropdown-menu ul li:first-child
使用:first-child 伪选择器

选择第一个子列表项元素