jquery - jquery ui滑块根据子元素修改宽度

Question

我有一个以像素为单位的巨大宽度的 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-itemdiv 并将每个的宽度相加，应用主scroll-contentdiv。

var totalWidth = 0;

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

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