Как я могу получить ширину элемента, который динамически заполняется с помощью JQuery

Question

Как я могу получить ширину элемента, который динамически заполняется с помощью JQuery

0

Как я могу получить ширину.box div (она заполняется динамически) с помощью jQuery, чтобы сделать его прокручиваемым по горизонтали внутри своей оболочки (.box_wrpr), если.box становится более широким, чем.box_wrpr или если больше.box добавляются динамически.

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>

CSS

div.box {
    height: 235px;
    min-width: 175px;
    border: 2px solid #47baa4;
    float: left;
    margin: 5px;
    background: #eff6f6;
    top: 25px;
}
.box_wrpr {
    height: 285px;
    width: 100%;
}

user3524809 29 апр. 2014, в 23:42

Источник

0

Разбиение этого очень длинного предложения на более мелкие может прояснить ваш вопрос.
isherwood 29 апр. 2014, в 21:12
0

api.jquery.com/width или одно из других измерений ширины, которые предоставляет jQuery, должно работать для вас.
Jay Blanchard 29 апр. 2014, в 21:13

Теги:

jquery

2 ответа

Ещё вопросы

Разбиение этого очень длинного предложения на более мелкие может прояснить ваш вопрос.
api.jquery.com/width или одно из других измерений ширины, которые предоставляет jQuery, должно работать для вас.

Loukas Avramidis · Answer 1 · 2014-04-29T19-19-00.000Z

Хорошо, вот как вы получаете ширину.

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

Но если я правильно понимаю, вам может и не понадобиться ширина. Вам просто нужно указать фиксированную ширину для обертки и установить для прокрутки поля overflwo.

http://jsfiddle.net/X64yw/1/

Если вы хотите добавить больше полей, создайте div для полей внутри оболочки и сделайте переполнение прокрутки.

Содержимое .box генерируется динамически, поэтому я не могу установить для него ширину.
Вам не нужно устанавливать ширину блока / ов, но ширину контейнера. И вам также нужно будет добавить overflow-y: scroll.
Не работает! потому что .box div смещены влево, поэтому они не имеют ширины, поэтому они никогда не переполняются !!! Вот почему я хочу получить ширину, если каждый .box после загрузки страницы и добавить ширину для каждого .box с помощью jquery .css
Может быть как то так? $ (document) .ready (function () {$ ('. box'). css ('width', function () {return $ (this) .width ();});}); Но я не уверен, что это будет работать ...

mark.hch · Answer 2 · 2014-04-29T18-55-00.000Z

Нечетный вопрос... Loukas Avramidis очень хорошо показал, как просто получить ширину коробки. Если вы хотите изменить overflow-x или overflow-y элемента div.box_wrpr, вы можете сделать что-то подобное в функции и называть его всякий раз, когда вы динамически изменяете размеры ящика или количество элементов.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');
}

Извините, я забыл упомянуть, что мне нужно прокручивать его горизонтально, а не вертикально.