How does the following code look like in native JS?
$(".custom-popover").hide();
Asked
Active
Viewed 58 times
1 Answers
2
That question is kind of broad. There is the way jQuery internally does it, and then there is a the way you can do it with just native JavaScript, independent of how jQuery may do it:
[].slice.call(
document.querySelectorAll('.custom-popover')).forEach(function (el) {
el.style.display = 'none';
}
);
Since document.querySelectorAll returns a nodelist that cannot be used with forEach, you can convert it to an actual array by calling slice on the nodelist. After that, loop through everything found and update the style property.
This is an alternative that does not use forEach, although I prefer the above approach:
var els = document.querySelectorAll('.custom-popover');
for (var i = 0; i < els.length; i++) {
els[i].style.display = 'none';
}
KevBot
- 17,900
- 5
- 50
- 68
-
1why do we need [].slice.call()? – Parag Bhayani May 19 '16 at 14:51
-
1@ParagBhayani, since I decided to use `forEach`, it has to be an actual array, `forEach` will not work on `nodelists` in every browser. – KevBot May 19 '16 at 14:52
-
Would you show me some example or link where I can learn this – Parag Bhayani May 19 '16 at 14:54
-
@ParagBhayani, here's a couple more links: [a SO question](http://stackoverflow.com/questions/13433799/why-doesnt-nodelist-have-foreach), and of course, the [documentation](https://developer.mozilla.org/en-US/docs/Web/API/NodeList) for nodelist – KevBot May 19 '16 at 15:00
-
Thanks! Just what I needed. – twstdindividual May 19 '16 at 15:10