Javascript for each loop

Question

I'm trying to write this:

$('.circle_div').each(function(){
        var $this = $(this),
            thisWidth = $this.width();
        $this.css('height', thisWidth + 'px');
    });

in javascript like this:

var circle_div = document.getElementsByClassName('circle_div');
for (el in circle_div){
    var thisWidth = el.style.width;
    el.style.height = thisWidth + "px";
}

I also tried for...of and for each, and a regular for loop incrementing var i. The jquery function works but the javascript doesn't. Any idea what I'm doing wrong?

jfriend00 · Answer 1 · 2018-06-27T17:23:41.503

5

Eeeck. Never use for/in to iterate elements of an array or array-like object (doing so will include other iterable properties in addition to just the array elements).

Plus el in your loop is the index, not the value. You have to use circle_div[index] to get the element from the nodeList. But, you MUST switch to a traditional for loop, not for/in.

var circle_div = document.getElementsByClassName('circle_div');
for (var i = 0; i < circle_div.length; i++) {
    var item = circle_div[i];
    item.style.height = item.style.width;
}

You also have to remove the + "px" because the units are already there in plain javascript.

For more details on using for loop with document.getElementsByClassName() (including ES6 info), see this other answer: For loop for HTMLCollection elements.

edited Jun 27 '18 at 17:23

answered Nov 02 '14 at 03:48

jfriend00

683,504
96
985
979

gotcha! i read through documentation and just thought i'd try them all. – Nov 02 '14 at 03:54
@Zack - do you realize that if you get an answer that solves your question, then you should select the best answer and click the green check mark to the left of that answer. That both rewards the person that provided the answer and earns you some reputation points for following the correct procedure. – jfriend00 Nov 03 '14 at 08:16
apologies, i actually moved on with my original jquery for a couple days because the style property wasn't accessible _(see chris-l's explanation above)_ – Nov 04 '14 at 03:39

chris-l · Accepted Answer · 2014-11-03T08:28:09.763

2

If you convert the NodeList object that returns getElementsByCLassName to a regular array, you can use the Array.prototype.forEach method on it:

// Get the divs, and convert the NodeList to a regular array.
var circle_div = [].slice.call(document.getElementsByClassName('circle_div'), 0);

circle_div.forEach(function (el) {
    el.style.height = el.clientWidth + "px";
});

This way looks more similar to your jquery code.

Check the fiddle: http://jsfiddle.net/7ew39phu/

Edit: I realize I should have used clientWidth, instead of style.width. The reason is that style properties seem to be only available if they were set using JavaScript, not if they were set using an css sylesheet.

Anyway, I fixed the code.

edited Nov 03 '14 at 08:28

answered Nov 02 '14 at 04:32

chris-l

2,802
1
18
18

this issue seems inconclusive. whenever i write this in javascript, i'm unable to change the height of my circle_div elements but when i write in jquery, it works perfectly. – Nov 03 '14 at 02:45
@Zack Fixed, please check the change and the fiddle! – chris-l Nov 03 '14 at 08:11

Trott · Answer 3 · 2014-11-02T04:18:34.577

0

var circle_div = document.getElementsByClassName('circle_div');
for (var i=0,l=circle_div.length; i<l; i++){
    circle_div[i].style.height = circle_div[i].style.width;
}

edited Nov 02 '14 at 04:18

answered Nov 02 '14 at 03:48

Trott

66,479
23
173
212

unfortunately, that's what i wrote but it's something else. could it be getElementsByClassName? – Nov 02 '14 at 03:55

Javascript for each loop

3 Answers3