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和for each，以及常规for循环递增var i。 jquery函数有效但javascript没有。知道我做错了吗？

Answer 1

Eeeck。永远不要使用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。

Answer 2

如果将返回NodeList的{{1}}对象转换为常规数组，则可以使用getElementsByCLassName方法：

Array.prototype.forEach

这种方式看起来更类似于你的jquery代码。

检查小提琴： http://jsfiddle.net/7ew39phu/

编辑：我意识到我应该使用// 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"; });，而不是clientWidth。原因是style.width属性似乎只有在使用JavaScript设置时才可用，而不是使用css sylesheet设置它们。

无论如何，我修改了代码。

Answer 3

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;
}

每个循环的Javascript

3 个答案: