每个循环的 Javascript

Question

我正在尝试写这个：

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

在 javascript 中是这样的：

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

我也试过for...of andfor each和一个常规的 for 循环递增 var i。jquery 函数有效，但 javascript 无效。知道我做错了什么吗？

Answer 1

埃克。切勿用于for/in迭代数组或类数组对象的元素（这样做将包括除数组元素之外的其他可迭代属性）。

另外el在您的循环中是索引，而不是值。您必须使用circle_div[index]从nodeList. 但是，您必须切换到传统的 for 循环，而不是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;
}

您还必须删除 ，+ "px"因为这些单位已经存在于纯 javascript 中。

有关使用for循环的更多详细信息document.getElementsByClassName()（包括 ES6 信息），请参阅其他答案：For loop for HTMLCollection elements。