Question

由于浮动它们并试图显示它们，我需要在布局中洗牌大元素。基本上.gallery-item类.gallery-large始终需要成为.item内的第一个孩子，主.item内有多个#gallery_slideshow个容器。目前，如果在第二个，第三个等项目中有一个大项目，它将作为第一个元素放置在第一个项目中，我希望它留在它自己的内部。例如，下面的代码会在第一个.item内部生成5个元素，其中包含2个大元素，而不是包含1个大元素的初始4个元素。

JS：

if($('.gallery-item').length > 1) {
        $('.gallery-large').each(function(e) {
          if(!$(this).is(':first')) {
            $(this).insertBefore('.gallery-item:first');
            //Reset height of owl carousel wrapper in case moved element was last
            $('.owl-wrapper-outer').css('height', 'auto');
          }
        });
      }

HTML：

<div id="gallery_slideshow" class="owl-carousel owl-theme">
              <!-- Example page 1 -->
              <div class="item row">
                <div class="col-md-2 col-sm-3 col-xs-12 gallery-item gallery-small">
                  <div class="gallery-image" style="background-image: url(http://www.gettyimages.in/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg)"></div>
                </div>

                <div class="col-md-2 col-sm-3 col-xs-12 gallery-item gallery-small">
                  <div class="gallery-image" style="background-image: url(http://www.gettyimages.in/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg)"></div>
                </div>

                <div class="col-md-4 col-sm-6 col-xs-12 gallery-item gallery-medium">
                  <div class="gallery-image" style="background-image: url(http://www.gettyimages.in/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg)"></div>
                </div>

                <div class="col-md-8 col-sm-6 col-xs-12 gallery-item gallery-large right">
                  <div class="gallery-image" style="background-image: url(http://www.gettyimages.in/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg)"></div>
                </div>
              </div>

              <!-- Example page 2 -->
              <div class="item row">
                <div class="col-md-2 col-sm-3 col-xs-12 gallery-item gallery-small">
                  <div class="gallery-image" style="background-image: url(http://www.gettyimages.in/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg)"></div>
                </div>

                <div class="col-md-2 col-sm-3 col-xs-12 gallery-item gallery-small">
                  <div class="gallery-image" style="background-image: url(http://www.gettyimages.in/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg)"></div>
                </div>

                <div class="col-md-4 col-sm-6 col-xs-12 gallery-item gallery-medium">
                  <div class="gallery-image" style="background-image: url(http://www.gettyimages.in/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg)"></div>
                </div>

                <div class="col-md-8 col-sm-6 col-xs-12 gallery-item gallery-large right">
                  <div class="gallery-image" style="background-image: url(http://www.gettyimages.in/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg)"></div>
                </div>
              </div>

            </div><!-- END #gallery_slideshow -->

Answer 1

你可以这样做，

$(".gallery-large").each(function() {
  $(this).parent().prepend(this);
});

遍历每个画廊 - 大型＆＃39;项目
使用prepend()方法将其设为第一个孩子。将它添加到自己的父级以保持正确的上下文。

：第一个选择器检查父项父项，而不是父项容器

1 个答案: