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 fiddle http://jsfiddle.net/tsuUE/

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

Answer 4

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

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

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

4 个答案: