使用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());
});

Answer 3

$('nav').insertBefore($('nav').parent());

这会将元素向上移动一次。

Js小提琴http://jsfiddle.net/tsuUE/

您可能希望为nav和id选择仅选择该元素。

Answer 4

在我的情况下，这非常有用，我必须将一个div（通过它的类）重新定位到一个级别。

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