I have a very ugly piece of html coming off a server that I am trying to make pretty.
So far things have gone well, I have been able to manipulate the html using jquery as well as the Tabs and frames plug-ins. However, I have one out standing issue. I would like to section the content of the page into divs. Currently it is a long series of tables as below: <table class=pagestart></table> <table></table> <table></table> <table></table> <table class=pagestart></table> <table></table> <table></table> <table></table> As you can see the sections are already defined, in a very poor way, by the pagestart class on the first table of a group. I would like to wrap all the tables starting with a pagestartclass, up until the next pagestart class with a div element. I have tried using $("#example table.pagestart").each( function(i){ if i==0{ $(this).before("<div id=tableSet"+i+">");} else{ $(this).before("</div><div id=tableSet"+i+">");} }) However, this does not work, because the before function always expects a complete element and my html ends up like this. <div id=tableSet0 /> <table class=pagestart></table> <table></table> <table></table> <table></table> <div id=tableSet1 /> <table class=pagestart></table> <table></table> <table></table> <table></table> Which leaves me in the same situation as before. Is there a way to do this, does anyone have any creative suggestions? I would really hate to have to hand code the javascript parsing of the dom and inserting of the tags. Thanks, K