[jQuery] jquery tabs on ajaxed content
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.