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 и for each и регулярный для контура приращения вара я. Функция jquery работает, но javascript этого не делает. Любая идея, что я делаю неправильно?

Answer 1

Если преобразовать NodeList объект, который возвращает getElementsByCLassName в обычный массив, вы можете использовать метод Array.prototype.forEach на нем:

// 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"; 
}); 

Этот способ выглядит более похожим на код JQuery.

Проверьте скрипку:http://jsfiddle.net/7ew39phu/

---

Изменить: Я понимаю, что я должен был использовать clientWidth вместо style.width. Причина в том, что свойства style доступны только в том случае, если они были установлены с использованием JavaScript, а не в том случае, если они были установлены с использованием таблицы sss.

Во всяком случае, я исправил код.

Answer 2

Eeeck. Никогда не используйте for/in для итерации элементов массива или объекта, подобного массиву (при этом будут включены другие итеративные свойства в дополнение к элементам массива).

Плюс el в вашем цикле - это индекс, а не значение. Вы должны использовать circle_div[index], чтобы получить элемент от nodeList. Но вы должны переключиться на традиционный цикл, а не на 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.

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