jquery - 将imgs的宽度变量计算为div

Question

我想用 Jquery 做一个轮播，而 img 的宽度是可变的。

我知道如何使用FIX宽度计算多个 img，但我不知道如何使用VARIABLE宽度计算以分配 div（在本例中为 sub_container）。

这是一个例子：

    <div id="container">
          <div id="sub_container" style="width:WIDTH FROM VARIABLE WIDTH OF IMAGES">          
             <img id="#number" width="200px" src="#">
             <img id="#number" width="240px" src="#">
             <img id="#number" width="150px" src="#">
             <img id="#number" width="500px" src="#">
          </div>
    </div>

记住：容器的宽度来自窗口/浏览器的宽度。

你能帮助我吗？：/

非常非常感谢你！:(

Answer 1

你可以这样做：

$(function() {
   var width = 0;
   // Get all images in the sub container
   $("img","#sub_container").each(function () {
       // Add the width of each image
       width += $(this).width();
   });
   // Do whatever you want with the width
   $("#sub_container").width(width);
});

工作示例：http: //jsfiddle.net/DZ9rF/

Answer 2

尝试这个：

$.fn.sumWidths = function() {
    var sum = 0; 
    this.each(function() {
        sum += $(this).width();
    });
    return sum;
};

然后

$('#sub_container').width( $('#sub_container img').sumWidths() );