I have tried many options, but this what I have so far and it doesnt work.
document.querySelectorAll('ul li').querySelectorAll('ul li').style.background = color;
document.getElementsByTagName("NAV").getElementsByTagName("UL").getElementsByTagName("LI").getElementsByTagName("UL").getElementsByTagName("LI").style.background = color;
my html
<nav>
<ul id = "mainNav">
<li><center>
<img id = "logo" src = ".png"></center>
</li>
<li id = "search">
<form name = "searchField">
<img src = ".png"><input name = "search" type = "text" placeHolder = "" id = "search">
</form>
</li>
<li><a href ="#">
<img src = ".png" alt = "img/home.png">HOME</a>
</li>
<li><a href ="#">
<img src = ".png" alt = "img/info.png">ABOUT</a>
</li>
<li id = "section"><a href ="#">
<img src = ".png"alt = "img/camera.png">PHOTOGRAPHY</a>
<ul>
<li><a href = "/photography">San Francisco</a></li>
<li><a href = "#">Lake Tahoe</a></li>
</ul>
</li>
<li id = "section"><a href ="#">
<img src = ".png"alt = "img/projects.png">PROJECTS</a>
<ul>
<li><a href = "/projects#informative">Informative</a></li>
<li><a href = "/projects#profile">Profile</a></li>
</ul>
</li>
<li id = "section"><a href ="#">
<img src = ".png"alt = "img/contact.png">CONTACT</a>
<ul>
<li><a href = "" target =" _blank">Twitter</a></li>
<li><a href = "" target =" _blank">Instagram</a></li>
<li><a href="mailto:[email protected]" target="_top">Email</a></li>
</ul>
</li>
</ul>
</nav>
<nav>
<ul id = "viewNav">
<a href = "#"><li> Some things here</li></a>
</ul>
</nav>
Does anyone have an idea how to select nav ul li ul li with javascript?
P.S. I havent learned jquery. So I want to do it with pure javascript.
I have tried many options, but this what I have so far and it doesnt work.
document.querySelectorAll('ul li').querySelectorAll('ul li').style.background = color;
document.getElementsByTagName("NAV").getElementsByTagName("UL").getElementsByTagName("LI").getElementsByTagName("UL").getElementsByTagName("LI").style.background = color;
my html
<nav>
<ul id = "mainNav">
<li><center>
<img id = "logo" src = "https://31.media.tumblr./cfc2c43f7e34ec3fcb60405fa5d4f5a5/tumblr_n9nvpjtNNW1tgkx81o1_1280.png"></center>
</li>
<li id = "search">
<form name = "searchField">
<img src = "http://31.media.tumblr./7732f8901e9c94cb94aa5cff9e11b2ae/tumblr_n8zm5cD1SL1tgkx81o1_1280.png"><input name = "search" type = "text" placeHolder = "" id = "search">
</form>
</li>
<li><a href ="#">
<img src = "https://38.media.tumblr./f319cbdb3a9bd4041fd2c6056827794b/tumblr_n9lpsfYFOB1tgkx81o3_1280.png" alt = "img/home.png">HOME</a>
</li>
<li><a href ="#">
<img src = "https://31.media.tumblr./1dc400960f59fca2f738ceab516d24f4/tumblr_n9lpsfYFOB1tgkx81o4_1280.png" alt = "img/info.png">ABOUT</a>
</li>
<li id = "section"><a href ="#">
<img src = "https://38.media.tumblr./11cb610a9c031eaf5bb8789cb9739717/tumblr_n9lpsfYFOB1tgkx81o1_1280.png"alt = "img/camera.png">PHOTOGRAPHY</a>
<ul>
<li><a href = "/photography">San Francisco</a></li>
<li><a href = "#">Lake Tahoe</a></li>
</ul>
</li>
<li id = "section"><a href ="#">
<img src = "https://31.media.tumblr./bd112082d5c902750e78aa9d7dd817fc/tumblr_n9lpsfYFOB1tgkx81o5_1280.png"alt = "img/projects.png">PROJECTS</a>
<ul>
<li><a href = "/projects#informative">Informative</a></li>
<li><a href = "/projects#profile">Profile</a></li>
</ul>
</li>
<li id = "section"><a href ="#">
<img src = "https://33.media.tumblr./e9a7f9ae946bdf2950be96f27023bb78/tumblr_n9lpsfYFOB1tgkx81o2_1280.png"alt = "img/contact.png">CONTACT</a>
<ul>
<li><a href = "http://www.twitter./skarchmit" target =" _blank">Twitter</a></li>
<li><a href = "http://www.instagram./skarchmit" target =" _blank">Instagram</a></li>
<li><a href="mailto:[email protected]" target="_top">Email</a></li>
</ul>
</li>
</ul>
</nav>
<nav>
<ul id = "viewNav">
<a href = "#"><li> Some things here</li></a>
</ul>
</nav>
Does anyone have an idea how to select nav ul li ul li with javascript?
P.S. I havent learned jquery. So I want to do it with pure javascript.
Share Improve this question edited Aug 13, 2014 at 21:25 Jordan Running 106k18 gold badges188 silver badges187 bronze badges asked Aug 13, 2014 at 21:18 HappyHappy 131 gold badge1 silver badge6 bronze badges 2- 2 What does your HTML look like? – j08691 Commented Aug 13, 2014 at 21:20
- I want to affect multiple navs. – Happy Commented Aug 13, 2014 at 21:21
4 Answers
Reset to default 4"how to select nav ul li ul li with javascript"
Do you mean this?
document.querySelectorAll('nav > ul > li > ul > li');
Note that you can remove the direct children condition > where it suits you.
Also note that querySelectorAll returns a collection (non-live NodeList) so you must iterate over it to manipulate every elements.
var nestedLis = document.querySelectorAll('nav > ul > li > ul > li'),
i = 0,
len = nestedLis.length;
for (; i < len; i++) nestedLis[i].style.backgroundColor = 'red';
Since most array functions can manipulate array-like objects, you can also apply [].forEach to the node list.
[].forEach.call(nestedLis, function (li) {
//manipulate li
});
QuerySelectorAll return a NodeList of objects, even if there is only one.
So you need to give the element position in the NodeList like so
document.querySelectorAll('ul li')[0]
For the first element.
If you need to go trough all the elements, you'll need a loop like so
var elems = document.querySelectorAll('ul li');
for (var i=0; i<elems.length; i++) {
elems[i].style.background = color;
}
This should work
document.querySelectorAll('NAV ul li ul li')
Just for the sake of including the jQuery solution..
$('nav ul li ul li')
or add a class to your sub menus like #myID and target
$('#myID li')