：first選擇器檢查父對象而不是父容器

Question

由於需要浮動大的元素並試圖顯示它們，因此需要對布局中的大元素進行混洗。 本質上，始終需要將.gallery-large類的.gallery-item放在.item內的第一個孩子，在.item主#gallery_slideshow內有幾個.item容器。 目前，如果在第二個，第三個等中有一個大項目，那么該項目將作為第一個元素的第一個元素放置，因為我希望它留在它自己的內部。 例如，下面的代碼在第一個.item包含5個元素， .item包含2個大元素，而不是在最初的4個元素中包含1個大元素。

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);
});

1. 循環瀏覽“大型圖庫”中的每個項目
2. 使用prepend()方法使其成為第一個孩子。 將其放在自己的父項之前，以保持正確的上下文。