如何根据窗口大小分离 div 框并替换其他地方

我的html的初始结构如下所示：

<div class="geniuses">
   <div class="one-first">       
   </div>
   <div class="one-second">
   </div>
   <div class="one-third">  
   </div><!-- one third-->
</div>

如何将带有类的div 分离一

秒钟，并将其放在具有类一先的div 之前？

目前我的jquery看起来像这样：

$(window).resize(function resize(){
   if($(window).width() < 1070){
       $('.one-second').detach();
       $('.one-first').before($('.one-second'));
   }         
}).trigger('resize');

目前我只能分离，但我正在努力将内容放回我想要的位置，而且当我使屏幕大于 1070 像素时，div 不会重新出现。

希望你能从笔上帮忙

detach div后，可以将其存储到变量或 jQuery 对象中，然后重新附加（appendTo，prependTo）。

假设这是我们的 HTML -

<body>
    <div class="geniuses">
      <div class="one-first">A
      </div>
      <div class="one-second">P
      </div>
      <div class="one-third">Z
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>

.JS：

$(window).resize(function resize() {
      if ($(window).width() > 1070) {
        // if width is more the 1070px. tweek accordingly.
        var $p = $('.one-second').detach();
        $p.prependTo($('.one-first'));
      } else {
        // To put things back into place
        var $p = $('.one-second').detach();
        $p.appendTo($('.one-first'));
      }
    });

希望对您有所帮助。

到目前为止，

您正在分离它永远不会附加回来。创建新div并使用.before()在其前面附加字符串文本.one-first。

您需要放置目标元素并使用它。注意 .before() 接受在selector之前插入的元素或 HTML 字符串。

$(window).resize(function resize() {
    if ($(window).width() < 1070) {
        $('.one-first').before($('.one-second'));
        //$('.one-second').insertBefore('.one-first');
    }
}).trigger('resize');

也可以使用.insertBefore()作为替代。

.before() 和.insertBefore()方法执行相同的任务。主要区别在于语法，具体在于内容和目标的位置。对于 .before（），方法前面的选择器表达式是插入内容的容器。另一方面，使用 .insertBefore() 时，内容位于方法之前，作为选择器表达式或动态创建的标记，并插入到目标容器之前。

$('.one-first').before($('.one-second'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="geniuses">
  <div class="one-first">
    1
  </div>
  <div class="one-second">
    2
  </div>
  <div class="one-third">
    3
  </div>
</div>

完成@PEJK的响应这里是答案

$(window).resize(function resize() {
   if ($(window).width() > 1070) {
      // if width is more the 1070px. tweek accordingly.
      var $p = $('.one-second').detach();
      $p.prependTo($('.one-first'));
   } else {
       // To put things back into place
       var $p = $('.one-second').detach();
       $p.appendTo($('.one-first'));
   }
}).trigger('resize');

相关内容

最新更新

热门标签：