jQueryを使用してHTMLを再構成する

Question

ユーザーがCMSでページコンポーネントを簡単に並べ替えるために、2つの構造（1つはネストされ、1つはネストされていない構造）を切り替える必要があるHTMLがあります。私はちょうど - ここ

は、私は、何の問題を、余分なdiv要素を取り除くことはできませんが、その後、それらをバック入れ

<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> 

... 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の後ですプレーンテキストや既存の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> 

仕事（または作業コードのより慣用のバージョンで）するトグルの第2の機能を得ることに任意の助けいただければ幸いですが...

です

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

これを試してみてください：あなたは、構造コードを削除しているが、

$(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); 

が働いて、私はそれがプラグインを使用するために再書きました。置き換え構造体については、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>