使用jQuery重组HTML(Restructuring HTML using jQuery)

我有一些HTML，我需要两个结构之间进行切换 - 一个嵌套的，和一个非嵌套 - 使用户更容易在一个CMS页面组件进行排序。

下面是之前的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>

在获得切换的第二功能上班任何帮助（或在其工作代码更地道的版本），将不胜感激...

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>

文章来源: Restructuring HTML using jQuery