Question

have a function in jquery to automatically create the tab elements for a product in ecommerce system.

function structureTabs()
{
    $('#tabs').prepend('<ul id="tabbtns"></ul>');

    $('#tabs h2').each(function(index){

        if(index > 0)
        {
            $(this).before('</div><div id="tabs-'+(index+1)+'">');
        }
        else
        {
            $(this).before('<div id="tabs-'+(index+1)+'" class="jackie">');
        }

        var title = $(this).text();

        $('#tabbtns').append('<li><a href="#tabs-' + (index+1) + '">' + title + '</a></li>');

    });

    $('#tabs').append('</div>');
}

You cannot put unclosed tabs into .before()??

Basically the content this is trying to wrap around is:

<div id="tabs">
<h2>Details</h2>
details text...
<h2>tech specs</h2>
tech spec text...
<h2>Video Sample</h2>
video embed url
</div>

The client of the eccomerce store can’t edit html, so need to build the tabs automatically in .js….

Answer 1

So to sum up all the other answers, I think the final script you are looking for would be something like this:

$("#tabs h2").each(function(i) {
    $(this).nextUntil("h2").andSelf()
        .wrapAll('<div id="tab-'+ i +'"></div>');
});

$("#tabs").before('<ul id="menu"></ul>')
$("#tabs > div > h2").each(function(i) {
    $("#menu")
        .append('<li><a href="#tab-'+ i +'">'+$(this).text()+'</a></li>');
});

There is just one little problem, though. It won’t work if you details text isn’t inside some html element. jQuery’s next or nextUntil function doesn’t recognise plain text as an element.