jquery得到div的高度

Question

我有3个div。

<div class="bg1"></div>
<div class="bg2"></div>
<div class="bg3"></div>

我正试图达到他们的高度并用jquery设置他们的CSS。

$('[class^=bg]').each(function(key,val){
     // tried, val.height() val.outerHeight val.innerHeight, this.height() etc
});

console.log(val)只显示<div class="bg1"></div>而不是jquery对象，我将如何获取和更改此循环中每个div的高度？

Answer 1

你的函数不正常是正确的，因为val是一个DOM对象而不是一个jQuery对象。 您可以通过使用val将每个$() DOM对象转换为jQuery对象来获得所需的效果。

此代码应按您希望的方式运行：

$('[class^=bg]').each(function(key,val){
    $(val).height();
    // or $(val).height(100) etc.
});

Answer 2

我建议通过添加新类来稍微更改代码。

<div class="bg bg1"></div>
<div class="bg bg2"></div>
<div class="bg bg3"></div>

然后你可以继续使用jquery更容易。

var dom = document.getElementsByClassName('bg'), height = '50';

for( var x = 0; x < dom.length; x++ ){
    dom[0].style.height = height;
}