@Grag

Как обработать несколько елементов циклом на Jquery?

Привет, нужно реализовать простенький алгоритм по горизонтальной динамической центровке блоков:

разметка
<div id="carousel" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        <div class="item active" id="bg1">
            <div class="carousel-caption col-sm-7">
                <div class="col-sm-12">
                    <div class="hw-logotype-stamp text-uppercase"><?php print Yii::app()->name ?></div>
                </div>
                <div class="col-sm-12 done-item-name text-center text-uppercase">
                    Text
                </div>
                <div class="col-sm-12 small-description">
                    <small>
small text
                    </small>
                </div>
                <div class="browse-cases col-sm-12">
                    <button class="btn btn-promo text-uppercase">learn more</button>
                    <button class="btn btn-promo text-uppercase">browse site</button>
                </div>
            </div>
        </div>

        <div class="item" id="bg2">
            <div class="carousel-caption col-sm-7">
                <div class="col-sm-12">
                    <div class="hw-logotype-stamp text-uppercase"><?php print Yii::app()->name ?></div>
                </div>
                <div class="col-sm-12 done-item-name text-center text-uppercase">
                    Text
                </div>
                <div class="col-sm-12 small-description">
                    <small>
small text
                    </small>
                </div>
                <div class="browse-cases col-sm-12">
                    <button class="btn btn-promo text-uppercase">learn more</button>
                    <button class="btn btn-promo text-uppercase">browse site</button>
                </div>
            </div>
        </div>

    </div>
    <!-- Controls -->
    <a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#carousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>


И таких елементов 10, каждый нужно отцентровать по горизонтали в центре страницы, проблема в том, что везде разный отступ.
Вот сам код:
(function() {
  $(function() {
    var SliderSize;
    return SliderSize = (function() {
      var sizeSlider;

      function SliderSize() {
        $(window).resize(function() {
          return $('.carousel-caption').each(function() {
            var bottomSize;
            bottomSize = ($(window).height() / 2 - $(this).height()) - 45;
            bottomSize = bottomSize - (bottomSize % 1);
            $(this).css('bottom', bottomSize);
            return bottomSize = 0;
          });
        });
      }

      sizeSlider = SliderSize();

      $(window).trigger('resize', function() {
        return sizeSlider;
      });

      return SliderSize;

    })();
  });

}).call(this);


Хелп)
  • Вопрос задан
  • 2336 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы