jquery - 使用 jQuery 重构 HTML

Question

我有一些 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>