Оберните HTML с DIV до следующего H3 - PullRequest
Новая
       18

Оберните HTML с DIV до следующего H3

4 голосов
/ 15 апреля 2010

У меня есть следующая структура 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. Я пробовал довольно много селекторов, но ни один из них не работал. Я правильно это делаю?

Ответы [ 2 ]

7 голосов
/ 15 апреля 2010

Такой подход должен работать, хотя я предполагаю, что есть много разных способов сделать это: 

$('#subgroup h3').each(function() {
    $(this).nextUntil('h3').wrapAll('<div></div>');
});
0 голосов
/ 15 апреля 2010

Вот как это выглядит после некоторого (и грязного) 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>
...