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

Posted 2023-03-16

【中文标题】jQuery，获取 each() img 尺寸适用于 each() DIV？

【英文标题】：jQuery, get each() img Dimensions apply to 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 准备好了！

【参考方案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"  />
    </li>
    <li class="brand">
      <img src="http://placekitten.com/140/200"  />
    </li>
    <li class="brand">
      <img src="http://placekitten.com/180/130"  />
    </li>
    <li class="brand">
      <img src="http://placekitten.com/150/130"  />
    </li>
    <li class="brand">
      <img src="http://placekitten.com/200/135"  />
    </li>
  </ul>
</div>

参考资料：

javascript： htmlImageElement.naturalHeight/HTMLImageElement.naturalWidth。 jQuery: css(). get()。