[jQuery] How to wrap multiple elements at once in one tag.
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