包装多个 <p> 在jQuery的div中

Question

In the following markup there are two <p> tags. How can I wrap both of them in a single div using jQuery?

<div class="box">
    <ul>
        <li>1</li>
        <li>1</li>
    </ul>
    <p>paragraph 1</p>
    <p>paragraph 2</p>
</div>

Desired output should be:

<div class="wrap">
    <p>paragraph 1</p>
    <p>paragraph 2</p>
</div>

I have been trying jQuery function .wrap, but failed to do so. I could only try following but it would wrap both <p> in separate <div> :

$( "p" ).wrap( "<div class='wrap'></div>" );

JSFiddle: http://jsfiddle.net/avfr8fpe/

Answer 1

You can use wrapAll :

$( "p" ).wrapAll( "<div class='wrap'></div>" );

Updated jsFiddle