Wrap HTML with DIV until next H3

后端 未结 2 619
不思量自难忘°
不思量自难忘° 2020-12-21 04:35

I have the following HTML structure:

相关标签:
2条回答
  • 2020-12-21 05:14

    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 讨论(0)
  • 2020-12-21 05:24

    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 讨论(0)
提交回复
热议问题