Question

说我在下面有这个列表。每个图像都有不同的宽度，而a标签的边距为15px，这使得列表项更加扩展，以便从下一个图像中获得一些空间。

<div id="otherproducts">
  <ul>
    <li><a href="products/sign-materials/"><img border="0" src="assets/images/subbrands/slider/slider.png" alt="" /></a></li>
    <li><a href="products/sign-materials/"><img border="0" src="assets/images/subbrands/slider/alight-slider.png" alt="" /></a></li>
    <li><a href="products/sign-materials/"><img border="0" src="assets/images/subbrands/slider/eclider.png" alt="" /></a></li>
    <li><a href="products/sign-materials/"><img border="0" src="assets/images/subbrands/slider/aluer.png" alt="" /></a></li>
    <li><a href="products/sign-materials/"><img border="0" src="assets/images/subbrands/slider/alucr.png" alt="" /></a></li>
  </ul>
</div>

我怎样才能让jquery在下面的计算中给出正确的项目宽度，这样我就可以给UL正确的总宽度，因为目前总数远远大于它应该... ...

var obj = $(this);              
var s = $("li", obj).length;
var w = $("li", obj).width(); 
var h = $("li", obj).height(); 
obj.width(w); 
obj.height(h); 
$("ul", obj).css('width',s*w);

Answer 1

您的解决方案只测量第一个项目，然后假设每个项目都很长。而是使用jQuery各自迭代所有项目，单独测量它们：

尝试

var width = 0;
$("li", obj).each(function(){width += $(this).width()});

$("ul", obj).width(width);

Answer 2

var ul= jQuery('ul'),
    finalWidth=0,finalHeight=0;

ul.find('li').each(function(){
    finalWidth+=jQuery(this).width();
    finalHeight+=jQuery(this).height();
});


ul.height(finalHeight).width(finalWidth);

Answer 3

与SteffenMüller的方法类似，您可能希望使用.each()，但您也应该使用.outerWidth(true)函数来获取边距。

编辑：更新了我的代码，以便它可以取代您的代码。

var obj = $(this);
// calculate the max height of the <li>s
var max_h = 0;
$("li", obj).each(function() {
    max_h = Math.max( max, $(this).outerHeight(true) ); // include padding and margins
});
obj.height(max_h); // set the (presumedly <div>'s) height to the max_height
var w = 0;
$("li", obj).each(function() { 
    w += $(this).outerWidth(true);
});
$("ul", obj).width(w); // set the width of the <ul> to be the sum of the <li>'s widths

如何计算ul内宽度不同的单个li的宽度

3 个答案: