javascript - :first selector checks against parents parent, 而不是父容器

Question

我需要在我的布局中随机播放大元素，因为它们是 float 的，并试图显示它们。基本上 .gallery-item with class .gallery-large 总是需要是 .item 中的第一个 child ，有几个 .item 主要#gallery_slideshow 内的容器。目前，如果第二个、第三个等元素中有一个大元素，它将作为第一个元素放置在第一个元素中，因为我希望它保留在它自己的内部。例如，下面的代码导致第一个 .item 中有 5 个元素，其中有 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() 方法让它成为第一个 child 。将其添加到自己的父级之前以保持正确的上下文。