jQuery，get-each(）img维度应用于each(）DIV

jQuery, get each() img Dimensions apply to each() DIV?

本文关键字：应用于 each DIV img get-each jQuery      更新时间：2023-09-26

jQuery获取图像尺寸，应用于div

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

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

这就是我得到的。如何缓存每个案例的变量？我是个新手。。。Sry

THANX的前4种方法正在发挥作用！

查询的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())
        });
    }
});

我认为你可以这样做：

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

正如Hubert在一条评论中所指出的，如果每个.brand容器有一个以上的图像，则该容器将采用容器中最后一个图像的大小，并且每个.brands代码将运行多次，并且可能无法使此解决方案成为最佳使用方案。

$(".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)
});

我建议，假设图像存在于DOM ready上（稍后不加载，使用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()
相关文章：