Question

<div class="divclass">
    <ul>
      <div class="lidiv"> <li><img src="img1.jpg"/></li> </div>
      <div class="lidiv"> <li><img src="img2.jpg"/></li> </div>
      <div class="lidiv"> <li><img src="img3.jpg"/></li> </div>
      <div class="lidiv"> <li><img src="img4.jpg"/></li> </div>
      <div class="lidiv"> <li><img src="img5.jpg"/></li> </div>
    </ul>
</div>

我如何获得图像宽度？所有图像的宽度都不同。我想得到图像宽度，然后将它交给div class =＆＃34; lidiv＆＃34;。任何人都可以帮忙吗？请！

Answer 1

$('.divClass ul li img').width();

此代码应该有效。但Rory McCrossan是对的，你的HTML无效。浏览器可能会删除div中的li标记，因此您可以通过javascript访问它。

但您可以为li标记添加宽度：

$('.divClass ul li').each(function() {
    var $li = $(this);
    $li.width($li.find('img').width());
});

警告：在某些浏览器上，在加载图像之前会触发DOMReady事件！因此，如果获得0宽度（或undefined），则应稍后执行此代码。您可以收听图片加载事件：

$('.divClass ul li img').load(function() {
    var $img = $(this);
    $img.parent().width($img.width());
});

Answer 2

首先循环de div-items。然后选择后代img-element。获取图像宽度后，将其放入div的css样式。

$(document).ready(function(){    
    $("div.lidiv").each(function() { 
        img = $(this).find('img');
        img_width = img.width();
        $(this).css('width', img_width);
    });
});

Answer 3

试试这个

var imgWidth = jQuery('img').clientWidth;

并编写有效的HTML。

使用jQuery获取div内的图像宽度

3 个答案: