jQuery: Wrap only first and second child, not the rest of children.

Question

In my actual code:

<div id="mother">
    <div id="child-01"></div>
    <div id="child-02"></div>
    <div id="child-03"></div>
</ul>

I need to produce:

<div id="mother">
    <div id="myWrap">
        <div id="child-01"></div>
        <div id="child-02"></div>
    </div>
    <div id="child-03"></div>
</ul>

I was playing with wrap, wrapAll and children, but im stuck.

Thanks in advance.

Answer 1

Remove # from your HTML ids.

$("#mother div:eq(0), #mother div:eq(1)").wrapAll("<div id='father'></div>")

Answer 2

sharp should not be part of the id's. Then you can do:

$('#child-01, #child-02').wrapAll('<div id="#mywrap" />');

Answer 3

First as Adam said remove the # prefix from your id attributes. Also match your closing tags, currently you have a </ul> where a </div> should be.

Then, you can do it using :lt() and .wrapAll() like this:

$("#mother div:lt(2)").wrapAll("<div id='myWrap'></div>");

This gets everything less than index 2 (0 and 1 are the first 2), then wraps it. You can test it here.

Answer 4

Wao, thank you!!!

Just one more thing, if in my actual code i have:

<div id="mother">
    <div id="child-01"></div>
    <div id="child-02"></div>
    <div id="child-03"></div>
</ul>

<div id="uncle">
    <div id="cousin-01"></div>
    <div id="cousin-02"></div>
    <div id="cousin-03"></div>
</ul>

How do i produce:

<div id="mother">
    <div id="myWrap">
        <div id="child-01"></div>
        <div id="child-02"></div>
        <div id="cousin-02"></div>
    </div>
    <div id="child-03"></div>
</ul>

Thanks.