jQuery，获取 each() img 尺寸适用于 each() DIV？答案

【问题标题】：jQuery, get each() img Dimensions apply to each() DIV?jQuery，获取 each() img 尺寸适用于 each() DIV？
【发布时间】：2014-11-20 03:16:33
【问题描述】：

jQuery Get Image Dimensions, Apply To Div

基于这篇文章，我想将 .each() 方法添加到函数中，因为我想将它应用于多个 DIV。由于声誉太低，无法发表评论。

var img = $(".brand > img");
$( ".brand" ).each(function() {
$( this ).css({width:img.width(), height:img.height()});
});

这就是我得到的。我如何缓存每个案例的变量？我是菜鸟……对不起

感谢前 4 种方法有效！

【问题讨论】：

"cache vars vor each case" 不确定你的意思是什么？
您的页面中的图像是否已在 DOM 上准备就绪，或者您是否随后使用 Ajax 加载它们？
我现在不需要/可以将每个应用到 var 因为图像具有不同的大小 - 是的，DOM 准备好了！

标签： javascript jquery css each

【解决方案1】：

查询的 css() 方法适用于选择的所有元素，因此您的代码可以更好地编写为：

var img = $(".brand > img");
var w = img.width();
var h = img.height();
$(".brand").css({width: w, height: h});

但是如果您想为每个 .brand 赋予包含 img 的个体的大小：

$(".brand").each(function() {
    var brand = $(this);
    var img = brand.find("img").first();
    if (img.length) {
        // wait for the image to load or it might have no dimensions
        img.load(function() {
            brand.css("width", img.width()).css("height", img.height())
        });
    }
});

【讨论】：

【解决方案2】：

我认为你可以这样做：

var img = $(".brand > img"); //Possibly it's an array?
$( ".brand" ).each(function(index) {
    $( this ).css({width:img[index].width(), height:img[index].height()});
});

或许：

$( ".brand" ).each(function() {
    var img = $( this ).find('img');
    $( this ).css({width:img.width(), height:img.height()});
});

【讨论】：

【解决方案3】：

正如 Hubert 在评论中指出的那样，如果每个 .brand 容器有多个图像，则容器将采用容器中最后一个图像的大小，并且代码将在每个 .brand 中运行多次，并且可能不会让这个解决方案成为最好的解决方案。

$(".brand > img").each(function () {
    $(this).parent().css({ width: this.width, height: this.height });
    // or
    // img.closest('div').css({ width: this.width, height: this.height }); if its not the direct parent you are after (the '.brand > img' however only finds images thats the first child to a .brand)
});

【讨论】：

但是请注意，如果 .brand 中有更多的 img 并且只有最后一个图像的尺寸适用于良好的效果，这将应用多次。

【解决方案4】：

我建议，假设图像已在 DOM 上准备就绪（稍后未加载，使用 ajax），并且每个 .brand 元素有一个图像元素：

var images = $('.brand img').get();
$('.brand').css({
    'width' : function(i){
        return images[i].naturalWidth;
        /* or, if you're specifying an alternate width for the images:
        return images[i].width;
        */
},
    'height' : function(i){
        return images[i].naturalHeight;
        /* or, if you're specifying an alternate height for the images:
        return images[i].height;
        */
});

var images = $('.brand img').get();
console.log(images);
$('.brand').css({
  'width': function(i) {
    return images[i].naturalWidth;
  },
  'height': function(i) {
    return images[i].naturalHeight;
  }
});

li {
  list-style-type: none;
  border: 2px solid #f00;
  margin: 0.5em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <ul>
    <li class="brand">
      <img src="http://placekitten.com/150/150" alt="" />
    </li>
    <li class="brand">
      <img src="http://placekitten.com/140/200" alt="" />
    </li>
    <li class="brand">
      <img src="http://placekitten.com/180/130" alt="" />
    </li>
    <li class="brand">
      <img src="http://placekitten.com/150/130" alt="" />
    </li>
    <li class="brand">
      <img src="http://placekitten.com/200/135" alt="" />
    </li>
  </ul>
</div>

参考资料：

JavaScript：
- HTMLImageElement.naturalHeight/HTMLImageElement.naturalWidth。
jQuery:
- css().
- get()。

【讨论】：