如何“剪切”DOM元素并将其显示在其他位置？

我有网站，并且我想要从.tab-content中“剪切”每个div#id，并且只在视口宽度小于768px时才将每个div加到每个li。如何“剪切”DOM元素并将其显示在其他位置？

我的HTML页面：

<section id="menu"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-xs-12"> 
       <ul id="menu-nav" class="nav nav-pills text-center"> 
        <li class="active"><h2><a href="#about" data-toggle="tab">About</a></h2></li> 
        <li><h2><a href="#services" data-toggle="tab">Services</a></h2></li> 
        <li><h2><a href="#contact" data-toggle="tab">Contact</a></h2></li> 
       </ul> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-xs-12"> 
       <div class="tab-content"> 
        <div class="tab-pane active" id="about"> 
         <div class="col-sm-8 col-sm-offset-2"> 
          <p class="text-center"> 
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis odit id praesentium, maxime, harum corporis officia laboriosam earum laudantium mollitia et quas, iure enim expedita. Nam sit, est libero obcaecati. 
          </p> 
         </div> 
        </div> 

        <div class="tab-pane" id="services"> 
         <div class="col-sm-8 col-sm-offset-2"> 
          <p class="text-center"> 
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis odit id praesentium, maxime, harum corporis officia laboriosam earum laudantium mollitia et quas, iure enim expedita. Nam sit, est libero obcaecati. 
          </p> 
         </div> 
        </div> 

        <div class="tab-pane" id="contact"> 
         <div class="col-sm-8 col-sm-offset-2"> 
          <p class="text-center"> 
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis odit id praesentium, maxime, harum corporis officia laboriosam earum laudantium mollitia et quas, iure enim expedita. Nam sit, est libero obcaecati. 
          </p> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</section>

我试图用jQuery的每一个DIV＃ID，但它不工作。

$(document).ready(function(){ 

    if ($(window).width() < 768) { 
     var divAbout = $('#about').pop(); 
     $(divAbout).appendTo('#menu-nav li:first-of-type'); 
    } 

    });

我想对移动这一结果：

<li> 
<h2>About</h2> 
<div id="about"> 
... 
</div> 
</li>

而同样给其他的div。

来源

2015-04-01 Robson

使用媒体查询，而不是jQuery的 – 2015-04-01 10:50:49

你已经使用Bootstrap，对吧？你只需要用'col-XX-＃'来解决这个问题 – cr0ss 2015-04-01 10:52:39

@MohitJain如何使用媒体查询来做到这一点？我只能操作css，但不能更改DOM。 – Robson 2015-04-01 10:56:22

您可以使用调整大小处理程序，并做

var flag; 
$(window).on('resize.menu', function() { 
    var width = $(window).width(), 
     $ul = $('#menu-nav'); 
    if (width < 768 && flag != 1) { 
     flag = 1; 
     $('#menu .tab-content .tab-pane').each(function() { 
      $(this).appendTo($ul.find('li:has(a[href="#' + this.id + '"])')) 
     }); 
    } else if (width >= 768 && flag != 2) { 
     flag = 2; 
     $ul.find('.tab-pane').appendTo('#menu .tab-content'); 
    } 
}).trigger('resize.menu')

演示：Fiddle

来源

2015-04-01 10:58:36

完美的作品。这正是我想要做的。非常感谢！ – Robson 2015-04-01 11:32:11

希望你正在寻找开发一个响应式网页设计。而不是削减DOM并将其添加到li标记。使用CSS3 media queries可根据元素宽度显示和隐藏元素。

但这里是你的问题的方法：

$(document).ready(function(){ 

    if ($(window).width() < 768) { 
     $(".tab-content div").each(function(index, ele) { 
      var id = this.id; // about , contact 
      $("li a[href='#'"+id+"]").parent().parent().append(this); 
      // this will match li with a having href="#about" etc 
     }); 
    } 

});

来源

2015-04-01 10:57:01 mohamedrias

如何“剪切”DOM元素并将其显示在其他位置？

回答

相关问题