使用jQuery将children元素向上移动一级

Question

我试图将一个导航元素提升到一个级别,所以我最终会得到类似的东西:

<div>
 <nav>
   <a href='#'>hello</a>
   <a href='#'>hello</a>
 </nav>
</div>

至

 <nav>
    <a href='#'>hello</a>
    <a href='#'>hello</a>
 </nav>
<div>
</div>

我一直在尝试使用unwrap(); 没有成功.

$('div > nav').unwrap();

不完全确定原因.

Answer 1

unwrap将展开你的导航意味着它将从DOM中删除div.尝试这样的事情.

var $div = $('div');
$div.before($div.children('nav')); 
//$div.before($div.children()); //For all children use children()

如果您有多个,请尝试这种方式:

$(function(){ //Make sure it is inside DOM ready
     var $div = $('div:has("nav")');
     $div.before(function () {
          return $(this).children("nav");
    });
});

Answer 2

您应该尝试insertBefore()更多信息:http://api.jquery.com/insertBefore/

$("nav").insertBefore("div");

如果你有倍数,并希望确保它向上移动一个级别而不是任何div只是它只是parent尝试这个:

$("div > nav").each(function (){
    $(this).insertBefore($(this).parent());
});

如果他们不在里面,div那么就这样做:

$("nav").each(function (){
    $(this).insertBefore($(this).parent());
});