CODEWITHSUNDEEP
javascriptjquery
scooterlord
scooterlord

Reputation: 15349

jquery wrap more than one element

I am looking to wrap an element with the following code:

$('.sltxt').wrap('<div class="wrapCheck"><input type="checkbox"><div class="chkbox"></div></div>');

I am getting this:

<div class="wrapCheck">
    <input type="checkbox">
        <div class="sltxt">
            text
        </div>
    </input>
    <div class="chkbox"></div>
</div>

However, I would like the code to be wrapped like this:

<div class="wrapCheck">
  <input type="checkbox">
    <div class="chkbox">
    </div>
<div class="sltxt">test</div>
</div>

is there any way to make this happen? (also input adds an unwanted </input>)

edit: upon further inspection, I actually need the following code:

<li>
     <a href="#drop2"><span class="pk-add_small"></span></a>
     <div class="wrapCheck">
         <input type="checkbox">
         <div class="chkbox"></div>
         <span class="sltxt">Κεντρική Κατηγορία 2</span>
   </div>
</li>

and I have this code:

<li>
   <a href="#drop2"><span class="pk-add_small"></span></a>
   <input type="checkbox">
   <span class="sltxt">Κεντρική Κατηγορία 2</span>
</li>

Upvotes: 0

Views: 95

Answers (2)

Popnoodles
Popnoodles

Reputation: 28409

$('.sltxt').wrap('<div class="wrapCheck">')
    .parent() // traverse up to .wrapCheck then prepend the input
    .prepend('<div class="chkbox"><input type="checkbox"/></div>');

http://jsfiddle.net/nZdMD/

Upvotes: 0

Jason P
Jason P

Reputation: 27012

I think you're looking for this... first wrap in the outer element, then add the other elements:

$('.sltxt')
    .wrap('<div class="wrapCheck"></div>')
    .before('<input type="checkbox" /><div class="chkbox"></div>');

http://jsfiddle.net/pmLdz/

Upvotes: 2

Related Questions