jquery.before（）不允许使用未关闭的标记

在jquery中有一个功能，可以自动为电子商务系统中的产品创建选项卡元素

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>');
}

函数结构选项卡（）
{
$（“#制表符”）.prepend（“
”）；
$（'#制表符h2'）。每个（函数（索引）{
如果（索引>0）
{
$（本）。在（''）之前；
}
其他的
{
$（本）。在（''）之前；
}
var title=$（this.text（）；
$（'tabbtns'）。追加（'li>'）；
});
$（'#制表符'）。附加（''）；
}

无法将未关闭的选项卡放入.before（）

基本上，它试图围绕的内容是：

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

细节
详细信息文本。。。
技术规格
技术规格文本。。。
视频样本
视频嵌入url

---

ECOMERCE store的客户端无法编辑html，因此需要在.js中自动构建选项卡……

jQuery使用元素，而不是标记。Before、after和其他dom操作函数以及$/jQuery函数都使用元素。使用标记的唯一功能是html

---

要执行您想要的操作，您必须重新考虑您的逻辑，或者通过html函数修改标记。

您可能需要查看and函数。它们允许您将元素包装到另一个元素中。例如：

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

---

为什么不在构建选项卡后使用

.wrap（）

函数呢

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

$（“#制表符”）.wrap（“
”）；

---

这将围绕您构建的html包装

标记。

我将构建一个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);
    });
})();

（函数（）{
var h2=[“详细信息”、“技术规格”、“视频样本”]；
var text=[“详细信息文本…”，“技术规格文本…”，“视频嵌入url”]
$（函数（）{
//创建选项卡jQuery对象
var$tabs=$（“”）.attr（“id”，“tabs”）；
//循环浏览所有h2内容
$。每个（h2，函数（索引，值）{
//添加h2标签
$tabs.append（$（“”）.html（value））；
//在h2标记后添加文本
$tabs.append（文本[索引]）；
});
//向DOM添加选项卡
$（“正文”）。附加（$tabs）；
});
})();

因此，总结所有其他答案，我认为您正在寻找的最终脚本如下：

$("#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>');
});

$（“#制表符h2”）。每个（功能（i）{
$（this）.nextUntil（“h2”）.andSelf（）
.wrapAll（“”）；
});
$（“#制表符”）。之前（“
”）
$（“#选项卡>div>h2”）。每个（功能（i）{
$（“菜单”）
.append（“
”）；
});

不过，有一个小问题。如果

详细信息文本

不在某个html元素中，它将不起作用。jQuery的next或nextUntil函数无法将纯文本识别为元素。

函数structureTab（） { $（“#制表符”）。前置（“”）

$（'#制表符h2'）。每个（函数（索引）{ $（this.nextUntil（'h2'）。和self（）.wrapAll（''）； var title=$（this.text（）； $（'#tabbtns'）。追加（'

'+title+'

'）； }))

$（'#tabs div'）。删除（'h2'）； }

---

---

结构选项卡（）

如果是一家电子商务商店，希望你能优雅地使用noScript处理JS。noScript现在有点过时了。。在JS关闭的情况下，它只是正常显示。我认为这符合Pete的期望。是的，我需要包装。。。但在我进入下一个列表之前，我还需要将下面的所有内容包装起来。。。有什么想法吗？@Pete Hawkins-我正在努力。。。考虑到jQuery基本上忽略了“文本节点”，这是非常复杂的。。。如果

之间的内容被包装在另一个标签中，那么会更容易…是的，我认为这会很复杂。它被包装在其他标记中，但它可以是任何数量的、

或嵌入标记。只要没有孤立的文本节点，就可以使用

$div.append（this，$（this）.nextUntil（'h2'）对不起，这是shopify电子商务系统。。。它不是UL我需要包装，UL填充标签的名称和链接。。。这一部分是有效的。客户只需输入一个产品描述，它必须被分成4个部分。。就我所知，shopify将所有文本包装在段落中。函数结构tabs（）{$（'#tabs'）。前置（'
）；$（'#tabs h2'）。每个（函数（索引）{$（this）.nextUntil（'h2'）。和self（）；$（“#tabs div”）.remove（'h2'）；}如果没有孤立文本，那么答案中提供的脚本就应该起作用。谢谢：）我喜欢jQuery，因为它非常简单（我敢说优雅吗？） solutions@Pete霍金斯-请注意-不要忘记点击投票区附近的复选标记，将其中一个答案标记为“接受答案”！欢迎来到堆栈溢出！可能需要在该全局范围内的
$h2
和
$text
前面放置一个
var
。。。另外，为什么不在docready中定义它们，这样就不会污染全局范围。。。另外，jQuery代码中通常遵循的“命名约定”不要在变量上使用
$
前缀，除非它是jQuery对象。@gnarf-感谢您发现了var错误。我没有意识到这是惯例，当我有一个用于jQuery的变量时，我只使用
$
。。。我会编辑的。我不确定这是一个惯例，这只是一个模式，我看到了很多，并试图坚持。。。例如，在您的代码中，
myH2
和
tabs
可以是
$tabs
和
$h2
，因为它们是jQuery集。。。使命名更有意义IMO@gnarf-看起来绝对是个好主意。当我使用
$
和不使用
时，我没有太多注意。只有当var是jQuery对象时才使用它才有意义。---我刚刚去掉了
$h2
jquery集…@gnarf-将数组添加到doc ready之外的匿名函数中。。。可能快一点。我会+1这个，因为它是准确的，但是我会
(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);
    });
})();

$("#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>');
});