用 DIV 包裹 HTML 直到下一个 H3答案

【问题标题】：Wrap HTML with DIV until next H3用 DIV 包裹 HTML 直到下一个 H3
【发布时间】：2011-02-08 06:42:34
【问题描述】：

我有以下 HTML 结构：

$('#subgroup a').nextUntil('h3').wrapAll('&lt;div&gt;&lt;/div&gt;');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="subgroup">
  <h3>Group name #1</h3>
  <a href="#">Link #1</a>
  <a href="#">Link #2</a>
  <h3>Group name #2</h3>
  <a href="#">Link #3</a>
  <a href="#">Link #4</a>
</div>

我有这个扁平结构是因为我想使用 jQuery UI 的手风琴效果。我想将所有a 元素包装在h3 元素之间。

但这导致一些a 元素消失。我尝试了很多选择器，但没有一个起作用。我这样做对吗？

【问题讨论】：

为什么不修复原始标记（而不是让用户的浏览器在每次页面加载时都这样做）？
问题在于输出糟糕的 HTML 的 CMS。如果可以的话，我会的！

标签： javascript jquery html wrapall

【解决方案1】：

这是经过一些漂亮（但很脏）的 jQuerying 整理 HTML 之后的样子：

<div id="subgr-productlist">

    <h3>Serie 1000</h3>
    <a id="product-PROD79" href="/global/hygiene/touchfree-dispensers/dispensers/products.aspx?ProductId=PROD79" name="product-PROD79">Model 1010</a>
    <a id="product-PROD80" href="/global/hygiene/touchfree-dispensers/dispensers/products.aspx?ProductId=PROD80" name="product-PROD80">Model 1020</a>
    <a id="product-PROD81" href="/global/hygiene/touchfree-dispensers/dispensers/products.aspx?ProductId=PROD81" name="product-PROD81">Model 1030</a>
    <a id="product-PROD82" href="/global/hygiene/touchfree-dispensers/dispensers/products.aspx?ProductId=PROD82" name="product-PROD82">Model 1040</a>
    <a id="product-PROD83" href="/global/hygiene/touchfree-dispensers/dispensers/products.aspx?ProductId=PROD83" name="product-PROD83">Model 1050</a>

    <h3>Serie 2000</h3>
    <a id="product-PROD234" href="/global/hygiene/touchfree-dispensers/dispensers/products.aspx?ProductId=PROD234" name="product-PROD234">Model 2010</a>

    <h3>Serie 3000</h3>
    <a id="product-PROD85" href="/global/hygiene/touchfree-dispensers/dispensers/products.aspx?ProductId=PROD85" name="product-PROD85">Model 3010</a>

    <h3>Serie 4000</h3>
    <a id="product-PROD86" href="/global/hygiene/touchfree-dispensers/dispensers/products.aspx?ProductId=PROD86" name="product-PROD86">Model 4010</a>
    <a id="product-PROD87" href="/global/hygiene/touchfree-dispensers/dispensers/products.aspx?ProductId=PROD87" name="product-PROD87">Model 4020</a>
    <a id="product-PROD88" href="/global/hygiene/touchfree-dispensers/dispensers/products.aspx?ProductId=PROD88" name="product-PROD88">Model 4030</a>
    <a id="product-PROD89" href="/global/hygiene/touchfree-dispensers/dispensers/products.aspx?ProductId=PROD89" name="product-PROD89">Model 4040</a>

</div>

换句话说，所有其他a 元素都消失了？

然后我运行这个 jQuery 脚本：

$('#subgr-productlist h3').each(function(){
    $(this).nextUntil('h3').wrapAll('<div class="test"></div>');
});

但这会导致#subgr-productlist div 呈现如下：

<div id="subgr-productlist">
    <h3>Serie 1000</h3>
    <h3>Serie 2000</h3>
    <h3>Serie 3000</h3>
    <div class="test">
        <a id="product-PROD85" href="/global/hygiene/touchfree-dispensers/dispensers/products/products.aspx?ProductId=%20Model%203010" name="product-PROD85"></a>
    </div>
    <h3>Serie 4000</h3>
</div>

【讨论】：

奇数。我刚刚在你的 html 上运行了你的代码，并得到了正确的输出。我看不出任何元素在运行该代码时会消失的任何原因； wrapAll() 永远不应该删除任何东西，这是唯一运行的活动函数。我认为某处正在发生一些微妙或奇怪的事情。你有任何额外的 javascript 在任何地方运行吗？你能用你发布的 html 和 jQuery 在一个简单的网页上重现这个问题吗？
嗯，我自己就让它工作了，我不知道为什么它不能早点工作。清空缓存、多个浏览器等都不起作用，但突然之间它就起作用了……我一定忽略了一些东西。非常感谢马特！ :D
没问题！有时你只需要一个健全性检查:) 希望它继续为你工作。

【解决方案2】：

这样的方法应该可行，尽管我猜有很多不同的方法可以做到这一点：

$('#subgroup h3').each(function() {
    $(this).nextUntil('h3').wrapAll('<div></div>');
});

【讨论】：

这不起作用，（是的，我在 wrapAall() 中添加了 <div></div>。我会尝试使用此解决方案。
对不起，我通过添加<div style='background-color: red'></div> 快速检查它是否对我有用，然后在我发布答案时花了太多时间！以什么方式不起作用？运行 jQuery 后，Firebug 中的 HTML 是什么样的？
确认这有效 - 也很有意义 - 对于每个标题，然后收集所有内容并使用 wrapALL。提示：nextUntil(':header') 对我来说效果更好，因为我有各种标题类型。