부모 요소 제거 및 하위 추가

Question

탐색 순서가 정렬되어 있지 않습니다. 다음은 간단한 jQuery 플러그인이 올바르게 작동하기 위해 따라야하는 간단한 구조입니다. 따라서이 코드 구조가 필요합니다.

<nav id="mp-menu" class="mp-menu"> 
<div class="mp-level"> 
    <ul id="demo1" class="nav"> 
     <li> 
      <a href="#">Devices</a> 
      <div class="mp-level"> 
      <h2>Devices</h2> 
      <a class="mp-back" href="#">back</a> 
      <ul> 
       <li><a href="#">Mobile Phones</a></li> 
       <li><a href="#">Televisions</a></li> 
       <li><a href="#">Cameras</a></li> 
      </ul> 
      </div> 
     </li> 
     <li> 
      <a href="#">Magazines</a> 
      <div class="mp-level"> 
       <h2>Magazines</h2> 
       <a class="mp-back" href="#">back</a> 
       <ul> 
        <li><a href="#">National Geographic</a></li> 
        <li><a href="#">Scientific American</a></li> 
       </ul> 
      </div> 
     </li> 
     ... 
    </ul> 
</div> 
</nav> 

나는 fallback을 제공해야하며 위와 다른 구조를 사용해야하는 다른 jQuery 플러그인을 선택했다. 클래스 이름이 .mp-level 인 DIV를 제거해야하지만 .mp-level 자식 목록을 비롯한 모든 정렬되지 않은 목록을 유지해야합니다.

결과는 제목과 DIV 'S가없는 정렬되지 않은 목록 일뿐입니다. 내 아래 코드는 올바른 요소를 제거하고하지만 내 문제는 다시 삽입 아이 정렬되지 않은 목록을 (특히 레벨 2) 함께 :

$("#demo1 h2, .mp-back").remove(); 
$(".mp-level ul li .mp-level").detach(); 
$(".mp-level ul li").append('.mp-level ul li .mp-level ul'); 

사람은 방법을 다시 삽입 자녀 UL의 조언을 가지고 내가 제거한 후 자신의 부모님?

Answer 1

당신은 편집 작업 전에이

$("#mp-menu").find(".mp-level").each(function(i,n){//each ".mp-level" 
    $(n).parent().append($(n).children());//append children to parent 
    $(n).remove();//remove actual div 
});   

http://jsfiddle.net/WBWwG/

Answer 2

변수에 할당 한 다음 해당 변수를 .append() 호출에서 사용하여 분리 된 노드 (jQuery 객체 안에 래핑 됨)를 저장할 수 있습니다. 이 같은

뭔가 :

// this selector doesn't select anything from the example html, btw 
var $mp_level = $(".mp-level ul li .mp-level").detach(); 
$(".mp-level ul li").append($mp_level);