정렬되지 않은 목록을 2 부분으로 분리하는 방법은 무엇입니까?

Question

나는 순서가 정렬되어 있지 않으며 특정 화면 크기에서 2 부분으로 나누기를 원하며 jQuery를 따라했습니다.

HTML은 다음과 같습니다 뷰포트가

<ul class="menu-primary"> 
    <li class="menu-item">home</li> 
    <li class="menu-item">Products</li> 
    <li class="menu-item">Settings</li> 
    <li class="menu-item">Contact</li> 
</ul> 

<ul class="searchform-block"> 
    <li class="right search"> 
     <form class="searchform search-form"> 
     <input type="text"> 
     </form> 
    </li> 
</ul> 

같은 미만 800 픽셀 그래서 나는 다음과 같은 jQuery를 그렇게하려고 때

<ul class="menu-primary"> 
    <li class="menu-item">home</li> 
    <li class="menu-item">Products</li> 
    <li class="menu-item">Settings</li> 
    <li class="menu-item">Contact</li> 
    <li class="right search"> 
     <form class="searchform search-form"> 
     <input type="text"> 
     </form> 
    </li> 
</ul> 

내가 두 부분으로이 정렬되지 않은 목록을 떼어하려면, 그러나 약간 문제가있다.

jQuery를 :

(function($){ 

    function viewport() { 

     var e = window, 
      a = 'inner'; 

     if (!('innerWidth' in window)) { 
      a = 'client'; 
      e = document.documentElement || document.body; 
     } 

     return { width : e[ a+'Width' ] , height : e[ a+'Height' ] }; 

    } 

    /** 
    * Responsive Navigation 
    */ 
    if (viewport().width < '800') { 
     $('.menu-primary li').each(function(i){ 
      if ($(this).hasClass('search')) { 
       $(this).before('</ul><ul class="searchform-block">'); 
      } 
     }); 
    } 

})(jQuery); 

하지만, jQuery를 위의 결과는 전혀 예상치 인 다음과 같다.

<ul class="menu-primary"> 
    ... 
    <li class="menu-item">Contact</li> 
    <ul class="searchform-block"></ul> 
    <li class="right search"> 
     <form class="searchform search-form"> 
     <input type="text"> 
     </form> 
    </li> 
</ul> 

참고 : 나는 또한 superfish.min.js 메뉴을 사용하고 있습니다.

Answer 1

jQuery는 before 함수에서 html을 수정하려고하기 때문에 올바르지 않습니다. ul.menu-primary 뒤에 ul 태그 요소를 만들고 두 번째 정렬되지 않은 목록으로 li.search를 이동해야합니다. 은 다음과 같습니다.

var tmpLiEl=null; 
$('.menu-primary li').each(function(i){ 
    if ($(this).hasClass('search')) { 
     tmpLiEl=$(this).detach(); 
    } 
}); 
$('.menu-primary').after('<ul class="searchform-block"></ul>'); 
tmpLiEl.appendTo('.searchform-block');