Question

jQuery Get Image Dimensions, Apply To Div

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

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

这就是我得到的。如何在每种情况下缓存变量？我是菜鸟...... Sry

THANX第一种方法正在运作！

Answer 1

我想你可以这样做：

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

Answer 2

正如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)
});

Answer 3

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

Answer 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()。

jQuery，get each（）图像尺寸是否适用于每个（）DIV？

4 个答案: