Question

如何获得所有图片宽度的总和，并将宽度添加到ul？

在这里，您可以看到我的脚本：SIDEBADGES下的http://makeaplate.justapplications.co.uk/，点击＆＃34;左侧或右侧的侧边栏＆＃34;比手风琴。

我想删除horizontall滚动。

我该怎么做？

Html代码：

<dl class="accordion">
  <dt><a href="#">open</a></dt>
  <dd>
    <ul>
        <li><a href="#"><img src="" alt="" /></a></li>
        <li><a href="#"><img src="" alt="" /></a></li>
        <li><a href="#"><img src="" alt="" /></a></li>
        <!-- this list is generated with ajax -->
    </ul>
  </dd>
  <dt><a href="#">open</a></dt>
  <dd>
    <ul>
        <li><a href="#"><img src="" alt="" /></a></li>
        <li><a href="#"><img src="" alt="" /></a></li>
    </ul>
  </dd>
  <!-- there's more ul's -->
</dl>

这是js：

$('.accordion a').click(function(e){
  $('.accordion dd').slideUp();
  $(this).parent().next().slideDown();

  // this is the code i need
  $sum = 0;
  $(this).children('img').each(function(){
        var liW = $(this).width(); // width of images
        var nrE = $(this).parent('li').length; // nr of li elements
        $sum += liW; // sum?
        $(this).parent('ul').css({width:$sum-(nrE*15)+'px'}); // 15px is margin-right for li
   });
});

Answer 1

上面评论的宽度为零的图像的可能解决方案：

$('img').on("load", function(){

     adjustUl()      

});

function adjustUl(){

    $(".accordion").find("ul").each(function(){

        var sumOfWidth = 0;    

        $(this).find("img").each(function(){

             sumOfWidth += $(this).width();

        });     

        $(this).width(sumOfWidth);

    });

}

Answer 2

要计算图像尺寸，您必须确定它们之前已加载。一个技巧是使用$（window）.load，但实际上等待所有站点资源的速度都很慢。

另一种方法是查看要检查的图像，如果它们已经加载（第一次加载网站时没有浏览器缓存）。为了方便起见，我写了一个jQuery插件：

if (typeof jQuery.fn.loaded === 'undefined') {
jQuery.fn.loaded = (function (options, callback) {

    var elements = this,
        defaults = {
            timeout: 0 //kein Timeout
        };
    if ($.isFunction(options)) {
        callback = options;
    } else {
        if (!$.isEmptyObject(options)) {
            options = $.extend(defaults, options);
        }
    }

    var dfd = new $.Deferred(),
        l = elements.length,
        i = 0;

    $.each(this, function () {
        if (typeof this.complete !== 'undefined') {
            if (!this.complete) {
                if (!$.isEmptyObject(options) && options.timeout > 0) {
                    //TODO: Timer der ein fail per Deferred Promise zurückgibt
                }
                $(this).load(function () {
                    if (typeof callback === 'function') {
                        callback.call(this);
                    }++i;
                    if (l == i) {
                        dfd.resolve(elements);
                    }
                });
            } else {
                if (typeof callback === 'function') {
                    callback.call(this);
                }++i;
                if (l == i) {
                    dfd.resolve(elements);
                }
            }

        }
    });

    return dfd.promise();

});
}

...

用法示例：

var $images = $('img');

var w = 0;
$images.each(function () {
   w += $(this).width();
});
console.log('Maybe while loading: ', w);

$.when($images.loaded()).then(function (el) {
   console.log('All images loaded now calculate the sum');
   var w = 0;
   $images.each(function () {
       w += $(this).width();
   });
   console.log('After loading all images Width is: ', w);
});

希望这会有所帮助。该插件使用Deferred对象来检查是否加载了所有已选择的图像。

这是一个小小的小提琴：http://jsfiddle.net/h37rm/4/ 尝试在本地或在您的网络服务器上运行它，然后您可以真正看到缓存的问题。

jQuery将所有子项的总和添加到父项

2 个答案: