如何在纯 Javascript 而非 jQuery 中向具有 ul 子元素的 li 元素添加类

Question

如何将类添加到具有子<ul>元素的<li> <ul>元素。 我发现 jQuery 中有很多示例，但在 Javascript 中没有。 我想用纯 Javascript 来做性能优化。 代码如下：提前致谢！

<nav id="navigation">
    <li><a href="#">Home</a></li>
    <li> <!-- >>> I want to add a class to this <li> element as it has a <ul> child element -->
       <a href="#">Services</a>
       <ul>
        <li><a href="">Graphic Designing</a></li>
        <li><a href="">Web Designing</a></li>
       </ul>
    </li>
    <li><a href="#">Contact</a></li>
</nav>

Answer 1

我想你需要这样的东西


// -------- vanilla js

document.querySelectorAll('li').forEach((el) => {

    if(el.querySelector('ul')) el.classList.add('theClassNameYouNeed');

});

// -------- jQuery (just to see the difference) :)

$('li').each(function() {

    const el = $(this);
    if(el.find('ul').length) el.addClass('theClassNameYouNeed');

});

从 jQuery 迁移到纯 Javascript (Vanilla) 的有用资源：

 document.querySelectorAll('li').forEach((el) => { if(el.querySelector('ul')) el.classList.add('theClassNameYouNeed'); });

 .theClassNameYouNeed { background: green; }

 <li><a href="#">Home</a></li> <li> <a href="#">Services</a> <ul> <li><a href="">Graphic Designing</a></li> <li><a href="">Web Designing</a></li> </ul> </li> <li><a href="#">Contact</a></li>

Answer 2

这是将类添加到以ul为子元素的li元素的一种可能方式

 const liElem = document.querySelectorAll("li") liElem.forEach(elem => { if(elem.querySelector("ul")) { elem.classList.add("new-class"); } })

 .new-class { color: red; background: #ececec }

 <li><a href="#">Home</a></li> <li> <a href="#">Services</a> <ul> <li><a href="">Graphic Designing</a></li> <li><a href="">Web Designing</a></li> </ul> </li> <li><a href="#">Contact</a></li>

Answer 3

您可以在以下两种方式中仅使用JavaScript来完成此操作。

这是将类添加到其中包含ul的li简单direct解决方案。 这将选择 DOM 中的第一个li > ul并使用 classList 和add方法对其应用类。

现场演示：

 window.addEventListener('DOMContentLoaded', (event) => { let getLiUL = document.querySelector('li > ul') getLiUL.parentElement.classList.add('foo') });

 .foo { background: green; }

 <nav> <li><a href="#">Home</a></li> <li>I want to add a class to this element as it has a child element <a href="#">Services</a> <ul> <li><a href="">Graphic Designing</a></li> <li><a href="">Web Designing</a></li> </ul> </li> <li><a href="#">Contact</a></li> </nav>

这是使用querySelectorAll方法和forEach循环的解决方案。 这将遍历DOM中的所有li ，并将类应用于唯一将ul作为子项的li 。

现场演示：

 window.addEventListener('DOMContentLoaded', (event) => { let getLiUL = document.querySelectorAll('li') getLiUL.forEach(function(e) { e.querySelector('ul') ? e.classList.add('foo') : " " }) });

 .foo { background: green; }

 <nav> <li><a href="#">Home</a></li> <li>I want to add a class to this element as it has a child element <a href="#">Services</a> <ul> <li><a href="">Graphic Designing</a></li> <li><a href="">Web Designing</a></li> </ul> </li> <li><a href="#">Contact</a></li> </nav>

参考：

类列表

查询选择器

查询选择器全部

Answer 4

演示片段

 const liElems = document.querySelectorAll('li'); liElems.forEach((elem) => { const childrenElems = elem.querySelectorAll('ul') if(childrenElems.length > 0){ elem.setAttribute("class", "democlass") } });

 <html> <head></head> <body> <li><a href="#">Home</a></li> <li> <a href="#">Services</a> <ul> <li><a href="">Graphic Designing</a></li> <li><a href="">Web Designing</a></li> </ul> </li> <li><a href="#">Contact</a></li> <script src="script.js"></script> <body> </html>

如何在纯 Javascript 而非 jQuery 中向具有 ul 子元素的 li 元素添加类

问题描述

4 个解决方案

解决方案1
4 2020-09-05 10:38:33

解决方案2
2 2020-09-05 10:40:36

解决方案3
2 2020-09-05 10:44:05

解决方案4
2 2020-09-05 10:55:51

如何在纯 Javascript 而非 jQuery 中向具有 ul 子元素的 li 元素添加类

问题描述

4 个解决方案

解决方案1 4 2020-09-05 10:38:33

解决方案2 2 2020-09-05 10:40:36

解决方案3 2 2020-09-05 10:44:05

解决方案4 2 2020-09-05 10:55:51

解决方案1
4 2020-09-05 10:38:33

解决方案2
2 2020-09-05 10:40:36

解决方案3
2 2020-09-05 10:44:05

解决方案4
2 2020-09-05 10:55:51