javascript - 将特定 div 从嵌套 div 中移出

Question

我正在使用带有嵌套 div 的 bootstrap，但我找不到一种有效的方法来从移动 View 的嵌套中移出特定的 div。我只能找到一种使用CSS的方法，通过在PC View 中执行显示 block 并在移动显示 View 中不显示任何内容来解决此问题，反之亦然，但它会从数据库发出错误的请求。

(我只知道一个 CSS-Tricks 方法，它在不同位置创建 2 个 C div。)

默认

.c1{
display:block}
.c2{
display:none}

移动媒体查询

.c1{
display:none}
.c2{
display:block}

更新进度:

$(document).ready(function(){
      var ravenous = function() { 
            if (window.matchMedia('(max-width: 768px)').matches){
                $(".wrap_content").remove();
                $("<div class='extraDIv'></div>").appendTo(".events_wrap");
                $("<div class='top_mid col-lg-12 followmini'>as</div>").appendTo(".extraDiv");
                }
            else{
                $(".extraDIv").remove();
                $(".wrap_content").appendTo(".events_wrap");
                }
  };
    $(window).resize(ravenous);
    ravenous();  

});

it's just creating new dives i think, it's not moving the dives

还有其他更好的选择吗？(意思是，我想要唯一的1个C div，但它是一个移动的div。从父div移到外面并成为一个独立的div)

Answer 1

可以说你快到了。你没有发布 HTML，所以我会做简单的结构。使用 matchMedia 它看起来更像这样:

HTML:

<div class="wrapper">
    <div class="a">
        <div class="b">
            <div class="c">This is C</div>
        </div>
    </div>
</div>
<div class="mobile_wrapper"></div>

JavaScript:

var media_query = [
    window.matchMedia('(max-width: 768px)')
    // here You can add other medias
],
    // this is for cache purpouse
    main_wrapper = $('.wrapper'),
    mobile_wrapper = $('.mobile_wrapper'),
    nested_div = $('.c');

// this is pretty obvious I think
function media0(mq){
    if(mq.matches){
        nested_div.appendTo(mobile_wrapper); //  move c into other wrapper
    }else{
        nested_div.appendTo(main_wrapper); // move c into main wrapper
    }
}

media0(media_query[0]); // this is required to execute matchMedia first time
media_query[0].addListener(function(mq){ // event listener which is way more offective than resize() event
    media0(mq);
});

工作示例:https://jsfiddle.net/1vtk3tue/1/我添加了背景颜色，以便您可以看到变化。