Question

Given two ordered but not necessarily sequential sibling elements, how can I wrap html around them?

$(element_a).before( "<span class='wow'>" );
$(element_b).after( "</span>" );

The above not working, as it closes the opening tag for me, and does not insert the latter.

(The siblings are a motley crew of types and classes, so using slice to help with this task is difficult, but maybe I’ve not thought it through.)

Answer 1

If I understand you correctly, you want to put a single span around all of the elements between element_a and element_b (inclusive).

The .wrapAll() method can do this quite nicely once you figure out how to get all of those elements into a single jQuery object, but something like this should work:

var $els = $(element_a);
$els = $els.add( els.nextUntil(element_b) ).add(element_b)

$els.wrapAll("<span class='wow' />");

This starts with a jQuery object containing just element_a, then uses the .add() method and .nextUntil() method to add in all the elements between element_a and element_b, and finally adds in element_b.