用 DIV 包裹 HTML 直到下一个 H3

发布于 2024-08-28 19:00:18 字数 788 浏览 6 评论 0原文

我有以下 HTML 结构：

$('#subgroup a').nextUntil('h3').wrapAll('<div></div>');

<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 元素消失。我已经尝试了很多选择器，但没有一个起作用。我这样做对吗？

原文

I have the following HTML structure:

$('#subgroup a').nextUntil('h3').wrapAll('<div></div>');

<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>

I have this flat structure because I want to use jQuery UI's accordion effect. I want to wrap all a elements between the h3 elements.

But this caused some of the a elements to disappear. I've tried quite a few selectors but none of them has worked. Am I doing this right?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

小姐丶请自重 2024-09-04 19:00:18

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

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

An approach like this should work, though I'm guessing there are many different ways of doing this:

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

回复收藏 0 原文

赢得她心 2024-09-04 19:00:18

这就是经过一些漂亮（但肮脏）的 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>

This is what it looks like after some nice (and dirty) jQuerying, to tidy up the 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>

In other words, all the other a elements disappear?

Then I run this jQuery script:

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

But that results in the #subgr-productlist div to render like this:

<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>

回复收藏 0 原文

~没有更多了~