Wrap HTML с DIV до следующего Н3

У меня есть следующий HTML структура:Wrap HTML с DIV до следующего Н3

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

Я попытался следующие, не повезло:

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

Но это вызвало некоторые из a элементов исчезнуть. Я пробовал несколько селекторов, но никто из них не работал. Правильно ли я это делаю?

источник

2010-04-15 Ronny-André Bendiksen

Почему бы не исправить исходную разметку (вместо того, чтобы браузер пользователя сделать это на каждой загрузке страницы)? – Quentin

Проблема заключается в том, что CMS выводит дрянной HTML-код. Я бы сделал, если б мог! –

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

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

источник

2010-04-15 08:46:47

Это не сработало, (я добавил '

' в 'wrapAall()'. Я попытаюсь поэкспериментировать с этим решением. –

Извините, я быстро проверил, что это сработало для меня, добавив '

', а затем тоже –

Проверьте мой ответ ниже: –

Это то, что она выглядит, как после некоторых симпатичных (и грязный) 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>

источник

2010-04-15 12:07:12

Нечетный. Я просто запустил ваш код на вашем html и получил правильный вывод. любая причина, по которой какие-либо элементы исчезнут, просто запустит этот код; wrapAll() никогда не должен удалять что-либо, и это единственная активная функция. Я думаю, что что-то тонкое или странное происходит где-то. У вас есть какой-нибудь дополнительный javascript, который работает где угодно? Можете ли вы воспроизвести проблему на простой веб-странице только с html и jQuery, которые вы разместили? –

Хм, я просто получил его, чтобы работать сам, и у меня нет идеи, почему он не будет работать раньше. Очистка кеша, нескольких браузеров и т. Д. Не сработала, но внезапно это просто сработало ... Я, должно быть, что-то упустил. Спасибо, кучка Мэтт! : D –

Нет проблем! Иногда вам просто нужна проверка здравомыслия :) Надеюсь, что он работает для вас. –

Wrap HTML с DIV до следующего Н3

ответ

Смежные вопросы