var tables = $('table', context); // set context, or modify selector, as needed var starts = tables.filter('.pagestart').map(function(){ return tables.index(this); }); $.each(starts, function(i, v){ tables.slice(v, (starts[i+1] || tables.length)).wrapAll("<div id='tableSet"+i+"'></div>"); });
On Nov 20, 9:26 pm, "[EMAIL PROTECTED]" <[EMAIL PROTECTED]> wrote: > 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