Selecting pairs of html elements in jquery

Question

I'm working with some server code that is generating html that looks something like:

<input type="radio" />
<label>something</label>

<input type="radio" />
<label>something</label>

<input type="radio" />
<label>something</label>

<input type="radio" />
<label>something</label>

I want to wrap each pair in a span but I can't figure out a way to select pairs of elements on jquery in order to use wrapAll() on them. I can't change the html that I am working with. Can anyone help?

Answer 1

$('input').each(function(){
    $(this).next('label').add(this).wrapAll('<span>');
});

1. next will find the closest sibling element.
2. add will add the matched item to the collection.

Demo

Answer 2

You can try this.

$('input').each(function(){
    $(this).next().andSelf().wrapAll('<span>');
});

Answer 3

$("input+label") might well be helpful.

http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors