javascript - 使用 jQuery 将子元素上移一级

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 will unwrap your nav means it will remove the div from DOM. Try something like this.

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

if you have multiple then try this way:

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

Answer 2

You should try insertBefore() more info: http://api.jquery.com/insertBefore/

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

If you have multiples and want to make sure it is moved up one level and not to just any div and only it's parent try this:

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

If they aren't all inside div then just do:

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

Answer 3

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

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

Answer 4

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

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

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

您可能希望nav只id选择该元素。