1

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 compatibility. 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.com/#contains_selector but I still having trouble with this... so any suggestion are appreciated.

webmasternewbie
  • 167
  • 1
  • 2
  • 16

2 Answers2

7

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:

enter image description here

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.

user7401478
  • 1,372
  • 1
  • 8
  • 25
  • The question is tagged with `jquery`, so I guess he is not looking for querySelectorAll – Psi Mar 05 '17 at 12:50
  • 1
    @Psi: You need to read the question again. Slowly and thoroughly. And, yes the question is tagged `javascript` as well. – Abhitalks Mar 05 '17 at 12:51
  • @weary: Remove the image, and include the code in the answer itself. Better still, create a snippet. – Abhitalks Mar 05 '17 at 12:52
  • @Abhitalks The image is for visual clarity how it works. The code is one line: `document.querySelectorAll("string")` which returns an array. – user7401478 Mar 05 '17 at 12:54
  • 1
    Reading the jQuery source to learn how to write JS isn't really a good idea. Better to simply learn to write clean code via documentation and examples. –  Mar 05 '17 at 13:00
  • @WearyAdventurer: There. I've done this. Please note that images are not searcheable and cause more problems than they intend to solve. A self-sufficient answer with code included is always better. I hope you won't mind my edit. I also included a link to the mdn reference. – Abhitalks Mar 05 '17 at 13:00
  • @Abhitalks I provided copypasteable code in the answer. – user7401478 Mar 05 '17 at 13:03
  • Thanks. However, I would still prefer the image to go. It shows nothing but how to search. Anyway, it is your answer. You decide. For the present, presence of code in searchable text is much better. So, thanks for that. Good job. I will re-upvote for that. – Abhitalks Mar 05 '17 at 13:06
  • You should mention that `querySelectorAll` isn't returning an array, its returning a `NodeList`, to convert it into an array you have to use `[].slice.call` – cyr_x Mar 05 '17 at 13:10
  • @cyrix: `[].slice.call` or similar hacks are not a good practice and discouraged. It is always better to do a simple iteration using `for`. Read this for more - https://toddmotto.com/ditch-the-array-foreach-call-nodelist-hack/ – Abhitalks Mar 05 '17 at 13:12
  • @cyrix Well -- yeah, but you can access it in the same way you would an array, you just can't use Array.prototype sorting/foreach functions. – user7401478 Mar 05 '17 at 13:13
  • @Abhitalks i'm aware of this, just wanted to make clear that the result is not an `Array` as said in the answer – cyr_x Mar 05 '17 at 13:14
  • Ahh yes @cyrix, you're right. I missed that. Op should edit that out and make it clear that it is a nodelist. Actually I edited this post to remove the image and provide a simple snippet, and link to reference, and removing other fluff. But, the Op for some bizarre reason doesn't like that. So, maybe the comments shall help the future reader. – Abhitalks Mar 05 '17 at 13:16
  • Excellent answer. I did try document.querySelectorAll('li > a'); close... document.querySelectorAll('li a'); as you show in example is working perfectly. Thanks! Marked as accepted answer. Also Thanks for every comment, you can always learn something new here. – webmasternewbie Mar 05 '17 at 13:21
1
$("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
}
Community
  • 1
  • 1
mchev
  • 713
  • 1
  • 8
  • 22