jQuery를 사용하여 HTML 재구성

Question

사용자가 CMS에서 페이지 구성 요소를 쉽게 정렬 할 수 있도록 두 개의 구조 (중첩 된 구조와 중첩되지 않은 구조) 사이를 전환하는 데 필요한 일부 HTML이 있습니다.

여기에 ... html로 이전의

<p><a href="#" id="restructure">Toggle Structure</a></p> 
<div id="modules"> 
    <div class="two_column_box"> 
    <div class="column_left"> 
     <p>Some text</p> 
    </div> 
    <div class="column_right"> 
     <p>Some text</p> 
    </div> 
    </div> 
    <div class="two_column_box"> 
    <div class="column_left"> 
     <p>Some text</p> 
    </div> 
    <div class="column_right"> 
     <p>Some text</p> 
    </div> 
    </div> 
</div> 

및 HTML 후

...

<p><a href="#" id="restructure">Toggle Structure</a></p> 
<div id="modules"> 
    <div class="column_left"> 
    <p>Some text</p> 
    </div> 
    <div class="column_right"> 
    <p>Some text</p> 
    </div> 
    <div class="column_left"> 
    <p>Some text</p> 
    </div> 
    <div class="column_right"> 
    <p>Some text</p> 
    </div> 
</div> 

나는 여분의 div의, 아니 문제를 제거하지만, 이후에 다시 퍼팅 수 있습니다 - 나는 단지 일반 텍스트 및 기존 DOM 요소에서 html을 빌드하는 방법을 얻지 마십시오. 여기에 지금까지 가지고있는 코드 ...

<script type="text/javascript" charset="utf-8"> 
    $(document).ready(function(){ 
    $('#restructure').toggle(
     function() { 
     alert('removing structure'); 
     var module_list = $("#modules > div > div"); 
     $("#modules").html(module_list); 
     }, 
     function() { 
     alert('replacing structure'); 
     var idx = 1; 
     var next; 
     var structure = $(""); 
     while((next = $('#modules > div:nth-child(' + idx++ + ')')).length) { 
      var element = next.clone(); 
      if(idx%2==1) { 
      $(structure).append('<div class="two_column_box">').append(element); 
      } else { 
      $(structure).append(element).append('</div>'); 
      } 
     } 
     $("#modules").html(structure); 
     } 
    ); 
    }); 
    </script> 

가 작동하도록 전환의 두 번째 기능을 얻기에 어떤 도움 (또는 작업 코드의 좀 더 관용적 버전에서) 많이 주시면 감사하겠습니다

은 ...입니다

$(document).ready(function(){ 
    $('#restructure').toggle(
     function() { 
     alert('removing structure'); 
     $("#modules .column_left, #modules .column_right").moveToGrandparent(); 
     $(".two_column_box").remove(); 
     }, 
     function() { 
     alert('replacing structure'); 

     var next = $('#modules > .column_left:first, #modules > .column_right:first'); 
     while (next.length > 0) 
     { 
      var wrapper = $("<div />").addClass("two_column_box"); 
      next.wrapAll(wrapper); 
      next = $('#modules > .column_left:first, #modules > .column_right:first'); 
     } 
     } 
    ); 
    }); 


    (function($) { 

    $.fn.moveToGrandparent = function() { 
     return $(this).each(function() { 
      $(this).parent().parent().append($(this)); 
     }); 
    };  

    })(jQuery); 

당신이 구조 코드가 작동 제거하고 있지만, 나는 플러그인을 사용하도록 다시 작성 :

Answer 1

당신은 당신이 동일한 요소로 한 번에 여러 요소를 포장하기 때문에 귀하의 경우 wrapAll을 사용해야합니다.

<script type="text/javascript" charset="utf-8"> 
    $(document).ready(function(){ 
    $('#restructure').toggle(
     function() { 
     alert('removing structure'); 
     var module_list = $("#modules > div > div"); 
     $("#modules").html(module_list); 
     }, 
     function() { 
     alert('replacing structure'); 
     var next; 
     while((next = $('#modules > div.column_left:first, #modules > div.column_right:first')).length) 
     { 
      next.wrapAll('<div class="two_column_box"></div>'); 
     } 
     } 
    ); 
    }); 
    </script> 

Answer 2

이 사용 해보세요. 대체 구조에 관해서는 jQuery wrapAll 메서드를 사용하여 나머지 요소가 없어 질 때까지 첫 번째 요소를 가져 오는 루프를 사용합니다.

HTH, 벤

Answer 3

gradbot의 제안에 일단 약간의 부록 : 요점은 요소가 정렬 UI를 사용하여 정렬 할 것입니다, 그래서에 다시 수업에 필요한 항목들이 목록에 있던 위치에 따라 - 홀수 인 좌측면, 심지어 오른편쪽에있다. 아마도 더 빠른 방법 일 수도 있지만 ...

<script type="text/javascript" charset="utf-8"> 
    $(document).ready(function(){ 
     $('#restructure').toggle(
     function() { 
      alert('removing structure'); 
      var module_list = $("#modules > div > div"); 
      $("#modules").html(module_list); 
     }, 
     function() { 
      alert('replacing structure'); 
      $('#modules > div').removeClass(); 
      $("#modules > div:odd").addClass('column_left'); 
      $("#modules > div:even").addClass('column_right'); 
      while((next = $('#modules > div.column_left:first, #modules > div.column_right:first')).length) { 
       next.wrapAll('<div class="two_column_box"></div>'); 
      } 
     } 
    ); 
    }); 
    </script>