如何获得'；使用jquery动态填充

如果.box比.box\u wrpr宽，或者动态添加了更多.box，如何使用jQuery获取.box div的宽度（它是动态填充的）以使其在包装（.box\u wrpr）中水平滚动

HTML

<div class="box_wrpr" style="overflow-x: auto; overflow-y: hidden; height: 285px;">
    <div class="box">
        <header class="box_header">
                <h3><span class="gray">Box</span> 1</h3>

            <p class="box_price">$0000.00</p>
        </header>
        <div class="box_images">
            <div class="IMG">   <span class=""></span>

                <img class="image_box" src="#" alt="">
                <p class="item_count">item <span class="count_number">1</span>
                </p>
            </div>
        </div>
        <div class="bottom_p">
            <p class="info"><span class="_icon"></span>Home - <span class="Mode">Standard</span>
            </p>
            <p class="date">01/21/14</p>
            <p class="ship"><span class="arrived_icon"></span>Est. Date - 01/28/14</p>
        </div>
    </div>
</div>

---

好的，这就是你得到宽度的方法

$('.box').width();

但如果我理解正确，您可能根本不需要它的宽度。您只需要为包装指定一个固定的宽度，并将框设置为可滚动

---

如果要添加更多的框，请在包装器中为框创建一个div，并使溢出可在那里滚动。

奇怪的问题。。。Loukas Avramidis很好地指出了如何简单地获得盒子的宽度。如果要修改div.box_wrpr元素的overflow-x或overflow-y，可以在函数中执行类似操作，并在动态更改时调用它。box大小或.box元素数：

var boxWrapperWidth = $('div.box_wrpr').width();
var boxWrapperHeight = $('div.box_wrpr').height();
var totalBoxWidth = 0;
var totalBoxHeight = 0;

$('div.box').each(function(){
     totalBoxWidth += $(this).width();
     totalBoxHeight += $(this).height();
});

if(totalBoxWidth > boxWrapperWidth){
     $('div.box_wrpr').css('overflow-x','scroll');
}
else{
     $('div.box_wrpr').css('overflow-x','hidden');
}

if(totalBoxHeight > boxWrapperHeight){
     $('div.box_wrpr').css('overflow-y','scroll');
}
else{
     $('div.box_wrpr').css('overflow-y','hidden');
}

---

把那个很长的句子分成几个小句子可能会让你的问题更清楚。或者jQuery提供的其他宽度度量之一应该适合您。很抱歉，我忘了提到我需要它水平滚动而不是垂直滚动。框的内容是动态生成的，因此我无法为其设置宽度。您不必设置框的宽度，但需要设置容器的宽度。您还需要添加overflow-y:scroll。不工作！因为.box div是向左浮动的，所以它们没有宽度，所以它们永远不会溢出！！！这就是为什么我想在页面加载后获得每个.box的宽度，然后用jquery.css将宽度添加到每个.box，可能是这样的吗$（document）.ready（function（）{$（'.box'）.css（'width'，function（）{return$（this.width（）；}）；}）；但我不确定它是否会起作用。。。

var boxWrapperWidth = $('div.box_wrpr').width();
var boxWrapperHeight = $('div.box_wrpr').height();
var totalBoxWidth = 0;
var totalBoxHeight = 0;

$('div.box').each(function(){
     totalBoxWidth += $(this).width();
     totalBoxHeight += $(this).height();
});

if(totalBoxWidth > boxWrapperWidth){
     $('div.box_wrpr').css('overflow-x','scroll');
}
else{
     $('div.box_wrpr').css('overflow-x','hidden');
}

if(totalBoxHeight > boxWrapperHeight){
     $('div.box_wrpr').css('overflow-y','scroll');
}
else{
     $('div.box_wrpr').css('overflow-y','hidden');
}