Question

Working an ajax checkboxlist that generates fine like so but the checkbox and label sometimes break onto a new line and was just trying to do a simple wrap?:

<input type="checkbox" name="Pet.Color" value="44" id="cbxColor_44" title="Black">    <label>Black</label><input type="checkbox" name="Pet.Color" value="37" id="cbxColor_37" title="Blue"><label>Blue</label><input type="checkbox" name="Pet.Color" value="43" id="cbxColor_43" title="Brown"><label>Brown</label> .....

Trying to wrap each input and label in a span, I didn’t want to mess up the function that generates each but appending/prepending span here or there, so I was trying for a quick selector to use to wrap() method:

 // nope  $('input ~ label').andSelf().wrap('<span class="nowrap" />')
//nope   $('input').nextUntil('label').wrap('<span class="nowrap" />')

//nope $('input').nextUntil('label').each(function (index) {
//    $(this).wrap('<span class="nowrap" />')
// });

// nope  $('input + label').andSelf().wrap('<span class="nowrap" />')

Suggestions?

Answer 1

The andSelf method simply adds the original element to a set that was selected from it.
For example, $(something).children().andSelf() will select the element’s children as well as itself.

You need to loop over each pair and call wrapAll:

$('input').each(function() { 
    $(this).next().andSelf()    //Get the pair of elements
           .wrapAll('<span class="nowrap" />')
});