如何在某些标签(数字)之后插入 div 并创建 rest 的父级

Question

假设我的代码是：

<div id="divname">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

现在，我如何使用javascript执行此操作？

<div id="divname">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <div class="onclick"></div>
    <div class="hidden">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</div>

简而言之，我想在特定数量的 span 标签

之后插入一个标签，然后创建其余 span 标签的父标签。然后，当单击div 和 onclick 类时，隐藏的div 将被删除，然后该父div 中覆盖的 span 标签会再次减少。

如果有任何疑问，请告诉我。

Answer 1

我会首先使用 ：gt 选择器来包装跨度：

var $newDiv = $("#divname > span:gt(3)").wrapAll($("<div>").addClass("hidden"));

然后在生成的div 之前进行插入：

$("<div>", { class: "onclick" }).insertBefore($newDiv.parent());

示例jsFiddle和一个带有CSS的示例（感谢kpull1）