Question

我有一个带有cover_container类的div，里面有img。用于获取img高度并将其应用于其父div的代码。这就是我所做的。

$('.cover_container').height($(".cover_container img").height());

简单的东西。但是，现在我在一个页面上有多个cover_containers，我开始挣扎。这是我做的：

for($a = 0; $a < $('.cover_container').length; $a++) {
  $currentcovercontainer = $('.cover_container')[$a];
  $currentcovercontainer.height($currentcovercontainer.children('img')[0].height());
}

然而，这给了我以下错误：

[21:33:57.440] TypeError: $currentcovercontainer.children is not a function

我也尝试过像jQuery（$ currentcovercontainer）.find（'img'）[0] .height（）或$ currentcovercontainer.height（$（'＆gt; img'）。height（）但是没有成功。

关于我做错什么的任何想法？

提前多多感谢！

Answer 1

我会在Vanilla JS中写这个 - 你可以保持原样，或者如果你必须将它转换为jQuery：

var qsa = document.querySelectorAll(".cover_container"),
    l = qsa.length, i;
// note: querySelectorAll is more widely supported than getElementsByClassName
for( i=0; i<l; i++) {
    qsa[i].style.height = qsa[i].querySelector("img").height+"px";
}

如果您的HTML是常规的，例如<div class="cover_container"><img src="..." /></div>，则可以更简单，因为这样您就可以使用qsa[i].children[0].height

Answer 2

您可以使用.each function执行1乘1的功能

$('.cover_container').each(function() {
    var $this = $(this);
    $this.height($this.find("img").height());
});

See this example on jsFiddle

Answer 3

$('.cover_container')[$a]为您提供DOM元素，而不是jQuery对象;

for(var $a = 0; $a < $('.cover_container').length; $a++) {
  var $currentcovercontainer = $($('.cover_container')[$a]);
  $currentcovercontainer.height($($currentcovercontainer.children('img')[0]).height());
}

...虽然eq()的工作方式与[]类似，但会为您返回一个jQuery对象;

for(var $a = 0; $a < $('.cover_container').length; $a++) {
  var $currentcovercontainer = $('.cover_container').get($a);
  $currentcovercontainer.height($currentcovercontainer.children('img').height());
}

虽然使用each;

可能会更多jQuery-esque

$('.cover_container').each(function () {
    var $this = $(this);

    $this.height($this.children('img').height());
});

另请注意，$a语法通常用于表示jQuery对象; $a将是一个数字，而不是jQuery对象。不要忘记使用var声明变量：）。

数组元素的孩子

3 个答案: