How can i add a class to an <li> element which has a child <ul> element. I found there are so many examples in jQuery but not in Javascript. I would like to do it in Pure Javascript for Performance Optimization. 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>
How can i add a class to an <li> element which has a child <ul> element. I found there are so many examples in jQuery but not in Javascript. I would like to do it in Pure Javascript for Performance Optimization. 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>
-
1
Grab all
<li>elements and check if one of their.childrens is an<ul>element, or grab all<ul>elements and check if their.parentElementis an<li>or grab all<ul>elements that are a direct child of an<li>element, or ... – Andreas Commented Sep 5, 2020 at 10:34
4 Answers
Reset to default 4I 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):
- http://youmightnotneedjquery./
- https://tobiasahlin./blog/move-from-jquery-to-vanilla-javascript/
- https://gist.github./joyrexus/7307312
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
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>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>You can do this two ways below using only JavaScript off-course.
Here is simple direct solution to add class to the li which has ul in it. This selects the first li > ul in the DOM and apply class to it using classList and add method.
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. This loops through all the li in the DOM and apply class to the only li which has ul as a child.
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:
ClassList
querySelector
querySelectorAll
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744842489a4596642.html
评论列表（0条）