CODEWITHSUNDEEP
jqueryhtmlcss
herrfischer
herrfischer

Reputation: 1828

Wrap two specific elements with jquery

I have some elements like

<div id="one">ONE</div>
<div id="two">TWO</div>
<div id="three">THREE</div>
<div id="four">FOUR</div>
<div id="five">FIVE</div>

Now I want to wrap a DIV tag around the two elements with the ID "two" and "three" to get this: 

<div id="one">ONE</div>
<div class="wrapped">
    <div id="two">TWO</div>
    <div id="three">THREE</div>
</div>
<div id="four">FOUR</div>
<div id="five">FIVE</div>

With the "wrapAll" function i can only target elements with the same class I think like:

$(document).ready(function(){
    $( "div" ).wrapAll( "<div class='wrapped' />");
});

I know I could give the two DIVs the same class with jquery first and then wrap them but I hope there is a more elegant way.

Upvotes: 0

Views: 4401

Answers (2)

AtheistP3ace
AtheistP3ace

Reputation: 9691

Just select the the two you want and wrapAll().

From docs (emphasis my own):

The .wrapAll() function can take any string or object that could be passed to the $() function to specify a DOM structure. This structure may be nested several levels deep, but should contain only one inmost element. The structure will be wrapped around all of the elements in the set of matched elements, as a single group.

Fiddle: https://jsfiddle.net/93dyokr0/1/

$('#two, #three').wrapAll( "<div class='wrapped' />");

Upvotes: 2

j08691
j08691

Reputation: 207861

You can do it with $('#two, #three').wrapAll('<div class="wrapped" />')

jsFiddle example

Upvotes: 5

Related Questions