[英]How to add a class to li element which has a ul child element in pure Javascript not jQuery
How can i add a class to an <li>
element which has a child <ul>
element.如何将类添加到具有子
<ul>
元素的<li>
<ul>
元素。 I found there are so many examples in jQuery but not in Javascript.我发现 jQuery 中有很多示例,但在 Javascript 中没有。 I would like to do it in Pure Javascript for Performance Optimization.
我想用纯 Javascript 来做性能优化。 The code is as follows: Thanks in Advance!
代码如下: 提前致谢!
<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>
I think you need something like this我想你需要这样的东西
// -------- 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');
});
Useful resources to move from jQuery to pure Javascript (Vanilla):从 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>
This is one possible way of adding the class to the li
element which has ul
as child这是将类添加到以
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>
You can do this two ways below using only JavaScript
off-course.您可以在以下两种方式中仅使用
JavaScript
来完成此操作。
Here is simple direct
solution to add class to the li
which has ul
in it.这是将类添加到其中包含
ul
的li
简单direct
解决方案。 This selects the first li > ul
in the DOM and apply class to it using classList and add method.这将选择 DOM 中的第一个
li > ul
并使用 classList 和add方法对其应用类。
Live Demo:现场演示:
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>
Here is solution which uses querySelectorAll
method and forEach
loop.这是使用
querySelectorAll
方法和forEach
循环的解决方案。 This loops through all the li
in the DOM
and apply class to the only li
which has ul
as a child.这将遍历
DOM
中的所有li
,并将类应用于唯一将ul
作为子项的li
。
Live Demo:现场演示:
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>
References:参考:
Demo snippet演示片段
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.