jquery ui slider根据children元素修改宽度

Question

我有一个宽度为px的jquery ui滑块。

.scroll-content {width:2400px;}

和结构：

<div class="scroll-pane ui-widget ui-widget-header ui-corner-all">
   <div class="scroll-content">
     <div class="scroll-content-item ui-widget-header"><img src="img/img1.jpg" /></div>
     <div class="scroll-content-item ui-widget-header"><img src="img/img2.jpg" /></div>
   </div>
 <div class="scroll-bar-wrap ui-widget-content ui-corner-bottom">
  <div class="scroll-bar"></div>
 </div>
</div>

我如何获得内部元素的宽度并将该宽度放到滑块容器中？

谢谢

Answer 1

有很多方法可以做到这一点。一种是循环遍历scroll-content-item div并将每个div的宽度加起来，应用主scroll-content div。

var totalWidth = 0;

$('.scroll-content-item').each(function(){
    totalWidth = totalWidth + $(this).width();
});

$('.scroll-content').css('width', totalWidth + 'px');