What is the alternative way of doing something like
$(".myElement").each(function(){
//function
});
in plain Javascript?
-
1Having an ID was a mistake on my part, I've edited it to be a classAllen S– Allen S2013-08-11 09:05:39 +00:00Commented Aug 11, 2013 at 9:05
Add a comment
|
5 Answers
This will iterate all divs in your current document. You can replace document.getElementsByClassName('someclass') etc. and do something with their attributes and values
var elements = document.getElementsByTagName('div');
for (var i = 0; i < elements.length; i++) {
doSomething(elements[i]);
}
Here is the jsfiddle: http://jsfiddle.net/allenski/p7w5btLa/
Comments
$(#myElement)
You are trying to iterate over a id selector. ID has to be unique in a HTML page.
If it's a class or element tags you want to iterate over you can use a for loop.
var $elems = $('.someClass');
for(var i=0; i< $elems.length; i++ ) {
// $elems[i] --> Gives you a `DOM` element
// $elems.eq(i) --> Gives you a `jQuery` object
}
Vanilla Javascript
var elems = document.getElementsByClassName('someClass');
for(var i=0;i< elems.length;i ++) {
elem[i] // Based on index
}
getElementsByTagName if you want to iterate over specific tags.
getElementsByName - get the elements based on name attribute.
You can also use document.querySelectorAll to get a list of objects and iterate over them.
var elems = document.querySelectorAll('.someClass')
for(var i=0; i<elems.length; i++) {
elems[i] // Give you DOM object
}
1 Comment
xanatos
By putting the $(".someClass") in the
for, you are recalculating it at every cycle of the for.Alternative methods to the each function, here are two:
Setup
var $all = $('*');
var len = $all.length;
1
while(--len){
// use $($all[len]); for jQuery obj
var elem = $all[len];
doWork(elem);
}
2
//reset len for next loop
len = $all.length;
do {
var $elem = $all.filter(':eq('+ --len + ')');
doWork($elem);
} while (len);
Comments
var el = $(something);
for (var i = 0; i < el.length; i++) {
// do something with el[i] or more often with $(el[i])
}
el is a pseudo-array (or array-like Object) that has a length and elements accessible with the [] operator in the range 0...length-1. So you can do el[0], el[1] etc., but remember that el elements aren't jquery "objects", normally they are DOM elements, so you can't do el[0].text("Hello"). As in the each method, you have to do $(el[0]).text("Hello");
It's even wrong to do:
for (var i = 0; i < $(something).length; i++) {
// do something with el[i] or more often with $(el[i])
}
because in this way the $(something) will be recalculated every cycle.
Comments
You have to use a for loop. look at http://www.w3schools.com/js/js_loop_for.asp
3 Comments
John Dvorak
w3schools is a terrible resource. Use MDN instead. Also, please don't just point to an external resource and walk away. Include the link for reference and quote the relevant parts here. Also, just pointing to the language feature (even if you show the syntax) is hardly going to be useful here
John Dvorak
also, it is not technically true that a
for loop has to be used. Among other options, there are while loops, do-while loops, recursion, asynchronous recursion, setInterval, or you can even hack something together from eval and string multiplicaion (via joins).
Ashwani
Referencing links must have context, So user can understand.