javascript - How to select all links (a) inside list (li) - Stack Overflow

admin管理员组

文章数量:1345032

I got jq code I need to convert to ->js<-. For me it doesn't make sense (cause jq is js), code is longer, it's time consuming (I'm not programmer) and give exactly the same effect... not to mention browser patibility. But...

I want to select all link (a) elements inside lists (li) iterate over them, change values and so on.

In jq one simple line $('li').find('a'); and it works even if there is something more between li and a like:

<li>
<div>
<a href=''>inside div</a>
</div>
</li>

what is the equivalent of jq code in plain js? I did try querySelector querySelectorAll, filter etc. to no avail (for me it works only when a is a directly child of li).

BTW there is an excellent page I did find when searching for answers - but I still having trouble with this... so any suggestion are appreciated.

I got jq code I need to convert to ->js<-. For me it doesn't make sense (cause jq is js), code is longer, it's time consuming (I'm not programmer) and give exactly the same effect... not to mention browser patibility. But...

I want to select all link (a) elements inside lists (li) iterate over them, change values and so on.

In jq one simple line $('li').find('a'); and it works even if there is something more between li and a like:

<li>
<div>
<a href=''>inside div</a>
</div>
</li>

what is the equivalent of jq code in plain js? I did try querySelector querySelectorAll, filter etc. to no avail (for me it works only when a is a directly child of li).

BTW there is an excellent page I did find when searching for answers - http://youmightnotneedjquery./#contains_selector but I still having trouble with this... so any suggestion are appreciated.

• javascript
• jquery
• type-conversion

Share Improve this question Follow edited Mar 5, 2017 at 12:48 webmasternewbie asked Mar 5, 2017 at 12:41 webmasternewbiewebmasternewbie 16711 gold badge22 silver badges1616 bronze badges 3

• try this $('li a'). – shafiq.rst Commented Mar 5, 2017 at 12:43
• its jq - I need js code. You probably mean document.querySelectorAll('li > a'); I tried that. Not working. – webmasternewbie Commented Mar 5, 2017 at 12:45
• Hey -- I submitted an answer that appears to be working. Make sure to accept it if it solved the problem. – user7401478 Commented Mar 5, 2017 at 13:00

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

You are looking for document.querySelectorAll(). This allows to fetch all elements in similar manner CSS do. So, for example, if you want to get all <a> inside of <li>, your query would naturally be li a, then use document.querySelectorAll("li a").

This function returns a NodeList of elements, and you need to iterate through it to get each element. It's like an array -- you use a[i] to access element with index i and use a.length to access the size of the NodeList. Here's an image for visual clarity:

Here's code for your solution:

var a = document.querySelectorAll("li a");
for(var i = 0; i < a.length; i++){
    a[i].innerHTML   = "If you want to change text of an element";
    a[i].style.color = "red";
}

Edit: If you like to convert more jQuery code to Javascript in future, check out jQuery non-minified source and look for the code you want, this might work too.

$("li a").each(function() {
    $(this).text("new text");
});

Each for object?

var links = document.getElementById("yourid").getElementsByTagName("a");

for(var i = 0; i < links.length; i++){
    do something
}

本文标签： javascriptHow to select all links (a) inside list (li)Stack Overflow