How do I detect if the nav item li has dropdown or not? In the example below:
<div id="nav">
<ul>
<li><a href="#">Link One</a></li>
<li><a href="#">Link One</a> <!-- add class to this LI -->
<ul class="dropdown">
<li><a href="#">Link One</a></li>
<li><a href="#">Link One</a></li>
</ul>
</li>
<li><a href="#">Link One</a></li>
<li><a href="#">Link One</a></li>
<li><a href="#">Link One</a></li>
<li><a href="#">Link One</a></li>
</ul>
</div>
Important
I know this is fair using jQuery - BUT I DONT WANT TO USE JQUERY.
This is the only place where I need JS, I am developing a very clean site where no JavaScript has been used. So just for the shake of this piece I don't want to use jQuery.
IE8 Compatibility is required though!
Kindly help on solving this issue using plain JavaScript. thanks all!
IE8 compatible (but not IE7):
var qsa = document.querySelectorAll("#nav .dropdown"), l = qsa.length, i;
for( i=0; i<l; i++) {
qsa[i].parentNode.className = "derp";
}
In addition to Kolink 's answer, you can do the same without using querySelectorAll
by using getElementByID
and getelementsByClassName
(and working for IE7 too):
var parent = document.getElementById("nav"),
childs = parent.getElementsClassName("dropdown"),
length = childs.length,
i;
for (i = 0; i < length; i++) {
childs[i].parentNode.className = "derp";
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.