I have this markup structure: <div id="ajax_content"> <h3>Some Title</h3> <span class="phone_holder>...some content...</span> <span class="phone_holder>...some content...</span> .... more spans like this (around 100, depends on particular ajax page I am loading, might change due to the content changes) <span class="phone_holder>...some content...</span> </div>
So, I need to make tabs out of this structure. Something like that: <div id="ajax_content"> <h3>Some Title</h3> <ul class="ui_tabs"> <li class="ui_tab"> <span class="phone_holder>...some content...</span> 38 more spans here <span class="phone_holder>...some content...</span> </li> <li class="ui_tab"> <span class="phone_holder>...some content...</span> 38 more spans here <span class="phone_holder>...some content...</span> </li> ... and so on (every 40 spans should be one tab) </ul> </div> What I was trying to do is following: $("#ajaxcontentarea").load(valuetostr, function () { $(".phone_holder:first-child").each(function(){ $(this).before("<ul><li>"); }); $(".phone_holder:nth-child(40n)").each(function(){ $(this).after("</li><li>"); }); $(".phone_holder:last-child").each(function(){ $(this).after("</li></ul>"); }); }); And then I was thinking with this to start making tabs. But it also doesn't work (it doesn't add any markup where I want it to, only closing </li> after 40n child, but not even all markup I am giving it. And also now I realize that I can't actually apply tabs after I have this markup ready... If I would have it... I am sorry for my english, it is not my mother tongue, but I am keeping on learning. Please help with direction or idea, where should I go with this.