Question

I have some HTML as such:

<span class="number">1.</span>Lorem ipsum dolor. <span class="special">Sit amet.</span> Consectur adipisicing elit. 
<span class="number">2.</span>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

What I want is this:

<span class="point"><span class="number">1.</span><span class="text">Lorem ipsum dolor. <span class="bar">Sit amet.</span> Consectur adipisicing elit.</span></span>
<span class="point"><span class="number">2.</span><span class="text">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></span>

Basically, each “number” span indicates the start of a bullet point, which runs either until the next “number” span or until the end of the HTML if there are no more “number” spans. Within the points, there may be additional HTML tags as well as plain text. I want to wrap each bullet point in a span, and also wrap the text within the bullet point in a span. Unfortunately, this looks like it might be a pain.

Any idea how I can go about this with jQuery (or some other solution even)?

Edit: Figured it out. jQuery has a .nextUntil() function that’s appropriate here: http://api.jquery.com/nextUntil/
After that, the wrapping can be done using .wrap(): http://api.jquery.com/wrap/

Edit again: Actually, I think the .nextUntil() function only deals with tag nodes and not text nodes. 🙁

Answer 1

This works…

var point = $('<span class="point" />');

$('body').contents().each(function() {

    var element = $(this);

    if (point.children().length > 0 && element.is('span.number')) {
        $('body').append(point);
        point = $('<span class="point" />');
    } 

    point.append(element);

})

$('body').append(point);

jsFiddle.