JQuery multiple selectors

Question

I have the following HTML markup:-

<select name="List1" id="l1">
<option>One</option>
<option>Two</option>
<option>Three</option>
<option>Four</option>
<option>Five</option>
</select>  

<select name="List2" id="l2">
<option>One</option>
<option>Two</option>
<option>Three</option>
<option>Four</option>
<option>Five</option>
</select>  

Using the following Jquery:-

$('#l1 option:nth-child(n+5)').wrapAll('<optgroup label="Group 1">');

$('#l2 option:nth-child(n+5)').wrapAll('<optgroup label="Group 1">');

I want to transform this to use one Jquery line to handle both additions of the

So using this:-

$('#l1 option:nth-child(n+5), #l2 option:nth-child(n+5)').wrapAll('<optgroup label="Group 1">');

Seems to wrap all of the elements combined in both select lists.

I want the above to wrap the elements of each select list individually.

Answer 1

You can't wrapAll but not wrapping all the elements...

You must use two selectors, or use one selector with end which is not the best practice...

wrapAll docs:

Description: Wrap an HTML structure around all elements in the set of matched elements.