获取 img 的宽度和高度，并使用 javascript 将其添加到最近的父级

Question

我已经弄清楚如何使用 javascript 获取图像的宽度和高度。我的问题是如何将宽度和高度应用到它最近的父级，在这种情况下它是使用 javascript 的 li。

<ul>
    <li> <img src="img1.jpg" /> </li>
    <li> <img src="img2.jpg" /> </li>
</ul>

我正在使用的js：

$(window).load(function() {
    var pic = $('img');
    var w = pic.width();
    var h = pic.height();

    pic.removeAttr("width"); 
    pic.removeAttr("height");

    $('ul li').css('width',w);
});

现在它只是获取第一个图像的宽度和高度并将其应用到每个li。

Answer 1

下面的解决方案已被修改以证明其有效性：

CSS:

li {
  border: 1px solid #000; 
  width: 80px;
  height: 100px;
}

HTML:

<ul>
    <li id="one"> <img src="img1.jpg" width="50" height="80" /> </li>
    <li id="two"> <img src="img2.jpg" width="70" height="50" /> </li>
</ul>
<input type="button" value="Change" id="change">

jQuery:

$('#change').click(function(){
    $('img').each(function(){
        e = $(this);
        dim = [e.width(),e.height()];
        e.parent().css({width: dim[0], height: dim[1]});
    });
});

示例： http://jsfiddle.net/kfnhh /

只需删除点击事件处理程序，代码就可以在您的环境中轻松实现。

Answer 2

尝试类似的事情：

$('img').each(function () {

    var pic = $(this) ;
    var w = pic.width();
    var h = pic.height();

    pic.removeAttr("width"); 
    pic.removeAttr("height");

    pic.parent().css('width',w)
})

没有尝试，但想法就在那里。

Answer 3

另一种方法：

pic.closest("li").css({'width' : w , 'height' : h});

Answer 4

.parent() 将为您提供您正在使用它的控件的父级。在您的情况下，以下内容应该为您提供图像控件的父控件。

// jQuery 
$(this).parent()

// Javascript
element.parentNode

Answer 5

尽可能少地改变：

$(window).load(function() {
    $('img').each(function() {
        var pic = $(this);
        var w = pic.width();
        var h = pic.height();

        pic.removeAttr("width"); 
        pic.removeAttr("height");

        pic.parents('li').css('width',w);
    });
});

这有效吗？