使用jQuery重构HTML

我有一些HTML需要在两个结构之间切换 – 一个嵌套，一个非嵌套 – 以便用户更容易对cms中的页面组件进行排序。

这是之前的HTML …

Toggle Structure
 
 
 
 
Some text
 
 
 
Some text
 
 
 
 
 
Some text
 
 
 
Some text
 
 
  

并在HTML之后……

 
Toggle Structure
 
 
 
Some text
 
 
 
Some text
 
 
 
Some text
 
 
 
Some text
 
  

我可以删除额外的div，没有麻烦，但后来把它们放回去 – 我只是不知道如何从纯文本和现有DOM元素构建html。 这是我到目前为止的代码……

   $(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('
').append(element); } else { $(structure).append(element).append('
'); } } $("#modules").html(structure); } ); });  

任何有助于使切换的第二个function起作用的帮助（或者在工作代码的更惯用的版本中）将非常感谢…

Answer 1

您应该在您的情况下使用wrapAll ，因为您将多个元素一次包装到同一元素中。

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 = $("
").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，Ben

Answer 3

一旦对gradbot的建议略有补充：关键是元素将使用UI排序进行排序，因此我需要根据列表中的位置对项目进行重新排序 – 奇数是左手边，甚至是右边。 可能有更快的方法，但……