Geek Answers Handbook

Restructuring HTML with jQuery

I have HTML that I need to switch between two structures - one nested and one not nested - to make it easier for users to sort page components in cms.

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

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

I can separate additional divs without any problems, but returning them later - I just don’t understand how to create html from plain text and existing DOM elements. Here is the code that I still have ...

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

Any help in getting the second switch function to work (or in a more idiomatic version of the working code) would be greatly appreciated ...

+4
source share
3 answers

You should use wrapAll in your case, since you are simultaneously wrapping multiple elements in the same element.

  <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>
+4
source

Try:

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

Despite the fact that you are removing structural code, I rewrote it to use the plugin. Regarding replacing the structure, I use the jQuery wrapAll method with a loop that gets the first elements until there are no remaining elements.

NTN, Ben

+3
source

As soon as a small addition to the gradbot sentence: the bottom line is that the elements will be sorted using UI sorting, so I needed to reclassify the elements depending on where they were in the list - odd, being left and even right, Probably there is faster way to do this, but ...

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

More articles:


All Articles