jQuery: Wrap elements with nextUntil()

Question

<h2 id="match" class="contentHeadline">Match only in here</h2>

<p>I don't if or how many dl+table live here.</p>

<dl><dt>Text</dt></dl>
<table class="groupTable"><td>1</td><td>Abc</td></table>

<dl><dt>Text</dt></dl>
<table class="groupTable"><td>2</td><td>Def</td></table>

<dl><dt>Text</dt></dl>
<table class="groupTable"><td>3</td><td>Ghi</td></table>

<p class="foo">Maybe some text lives here. I should not float.</p>

I want to wrap each pair of dl + table in a div.box (floating), but only directly under h2#match until other stuff following (.foo or headlines).

$("dl").each(function(){
    $(this).next('.groupTable').andSelf()
        .wrapAll('<div class="box"></div>');
});

/* Clear */
$('<div class="clear"></div>').after('.box:last');

nextUntil() wraps dl and the table individually.

Atm the test group is wrongly wrapped.

Test: http://jsfiddle.net/GQwB5/

Desired result: http://jsfiddle.net/kppQ9/

The table element for the 'Test' group does not have `class = 'groupTable'` — , Jul 13 '14 at 10:40
Well it looks like you've it working in the *desired result* fiddle.. then what's the problem..? btw what do you mean by "but only directly under h2#match until other stuff following (.foo or headlines)." ..?? — T J, Jul 13 '14 at 12:32
The desired result is to clearify how it should look at the end. I jquery to wrap them into div.box. What I mean is I need to select each dl+table.groupTable under h2#match until other non dl+table stuff follows like the p.foo or some h2. — Martin, Jul 13 '14 at 12:48

score 2 · Accepted Answer · answered Jul 13 '14 at 15:58

$('#match').nextUntil('.contentHeadline') works well.

Applied:

$('#match').nextUntil('.contentHeadline').filter('dl').each(function(){
    $(this).next('.groupTable').andSelf().wrapAll('<div class="box" />');
});
$('#match').nextUntil('.contentHeadline').filter('.box:last').after('<div class="clear" />');

Fiddle: http://jsfiddle.net/GQwB5/1/

I suspect that .nextUntil(".foo, .contentHeadline") won't work because it expects a single matching element, and that would return at least two.

jQuery: Wrap elements with nextUntil()

1 Answers1