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

问题描述

如何将类添加到具有子<li>元素的<ul>元素中。我发现jQuery中有很多示例，而Javascript中没有。我想在纯Java脚本中进行性能优化。代码如下：预先感谢！

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

解决方法

我认为您需要这样的东西


// -------- 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（香草）：

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>

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

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>

您可以仅在场外JavaScript下通过两种方法执行此操作。

这里是一种简单的direct解决方案，用于将类添加到其中具有li的{{1}}中。这将选择DOM中的第一个ul，然后使用classList和add方法将类应用于它。

实时演示：

li > ul

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中的所有li，并将类应用于唯一以DOM作为孩子的li。

实时演示：

ul

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

.foo {
  background: green;
}

参考：

ClassList

querySelector

querySelectorAll

演示代码段

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>

html-lists javascript