Question

我正在使用prependTo()移动extract_me类，并将其添加到addme_here类中，以用于中小型设备。

extract_me类存在1行和2列，而第1行的1列进一步分为两个部分，它们在一起。 product_content类具有背景并且包含1行的所有元素。但是对于较小的设备，每2列1行会跳到product_content的外面，并在addme_here里面加上。它工作正常，但响应速度有点慢。任何人都可以看到它正在移动，看起来好像已经不在那儿了。

$(document).ready(function() {
  $(window).resize(function() {
    location.reload();
  });
  if ($(document).width() < 992) {
    console.log("i am medium size device ");
    if ($(document).find('.extract_me')) {
      $(".extract_me").prependTo($(".addme_Here"));
    }
  }
});

.product-content {
  background: url(https://www.freepptbackgrounds.net/wp-content/uploads/2013/01/Light-Blue-Effect-PPT-Backgrounds.jpg);
  background-repeat: repeat;
  padding: 40px 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product-content mb-3">
  <div class="container">
    <div class="row">
      <div class="col-sm-12 col-lg-9 mb-3">
        <div class="row">
          <div class="col-2 slider">
            <h1>hello</h1>
          </div>
          <div class="col-10">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
              book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
              recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
          </div>
        </div>
      </div>
      <!-- RIGHT SIDE -->
      <div class="extract_me col-sm-12 col-lg-3 ">
        <div class="row mb-2">
          <div class="col">
            <h1 class="thick_text" id="top">Digital Albums</h1>
            <p>Prices from <span style="font-size:25px">£0.11p</span></p>
            <p>hfuytg bjb bkjb bvgkujb byu</p>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
              book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
              recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="container addme_Here">
  <div class="row mb-3">
    <div class="col-lg">
      <p> please add here </p>
    </div>
  </div>
</div>

PrependTo函数无法有效运行？

0 个答案: