代码之家 › 专栏 › 技术社区 › Ren Jitsm

如何向li元素添加一个类,该元素在纯javascript而非jquery中有一个ul子元素

html-lists javascript

Ren Jitsm · 技术社区 · 4 年前

如何将类添加到 <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>

2 回复 | 直到 4 年前

Francesco Orsi 4 年前

我想你需要这样的东西


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

Nithish 4 年前

这是将类添加到 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>

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

Always Helping 4 年前

你能做到的二以下方法仅适用于 JavaScript 当然了。

这里很简单 direct 将类添加到 li 这已经 ul 在里面。这将选择第一个 li > ul 在DOM中,使用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 只对 锂 这已经 ul 小时候。

现场演示:

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

傅先生{
背景:绿色;
}

<导航>
<李>&书信电报;a href=“#”>家</a></李>
<李>我想向这个元素添加一个类,因为它有一个子元素
<a href=“#”>服务</a>
<ul>
<李>&书信电报;a href=“”>平面设计</a></李>
<李>&书信电报;a href=“”>网页设计</a></李>
</ul>
</李>
<李>&书信电报;a href=“#”>联系</a></李>
</导航>

参考资料:

ClassList

querySelector

querySelectorAll