Jquery.before () without private tags

Question

have a jquery function to automatically create tabs for a product in an e-commerce 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>');
}

Can't you put open tabs in .before () ??

Mostly the content he is trying to wrap:

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

The eccomerce repository client cannot edit html, so you need to automatically create tabs in .js ....

Answer 1

So, to summarize all the other answers, I think that 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 only one small problem. It will not work if you are details textnot inside any html element. The jQuery next or nextUntil function does not recognize plain text as an element.

Answer 2

jQuery , . , dom, $/jQuery . , , html.

, , html.

Answer 3

, .wrap() .wrapAll(). . :

 $(this).wrap('<div id="tabs-'+(index+1)+'" class="jackie">');

: <div>, , . (.. ), jQuery . :

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

    var $div = $('<div id="tabs-' + (index + 1) + '" class="jackie">');
    $div.insertBefore(this);
    // jQuery skips text nodes, so lets grab all the nodes until we find another h2
    // using DOM
    var nodes = [this];
    var node = this.nextSibling;
    while (node && !(node.tagName && node.tagName.toUpperCase() == 'H2')) {
        nodes.push(node);
        node = node.nextSibling;
    }
    $div.append(nodes);

});

jsFiddle

, .nextUntil() .

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

    var $div = $('<div id="tabs-' + (index + 1) + '" class="jackie">');
    // put the div before the <h2>
    $div.insertBefore(this);
    // append the <h2> and all the siblings forward until you find another <h2>
    $div.append(this, $(this).nextUntil('h2'));

});

Answer 4

.wrap() ?

$('#tabs').wrap('<ul id="tabbtns"></ul>');

<ul> html.

Answer 5

jQuery :

(function() {

    var h2 = ["Details", "tech specs", "Video sample"];
    var text = ["details text...", "tech spec text...", "video embed url"]

    $(function() {

          // create tabs jQuery object
        var $tabs = $("<div/>").attr("id","tabs");

          // loop through all h2 contents
        $.each(h2, function(index, value) {

              // Add h2 tags
            $tabs.append($("<h2/>").html(value));

              // Add text after h2 tag
            $tabs.append(text[index]);        
        });

          // Add tabs to the DOM
        $("body").append($tabs);
    });
})();

Answer 6

function structureTabs()  { $( '# ') ( '');.

$('# tabs h2'). each (function (index) {  $ ().nextUntil( 'h2') andSelf() wrapAll ( '')..;  var title= $(this).text();  $ ('# tabbtns'). append ('

' + title + ''); });

$('# tabs div'). remove ('h2');  }

structureTabs();