CODEWITHSUNDEEP
jquery
Charles Yeung
Charles Yeung

Reputation: 38805

jQuery - Wrap div to multiple element

Hi
Suppose I have the code below:

  <div class="Hello">
    <div class="inner">Hello</div>
  </div>
  <div class="Goodbye">
    <div class="inner">Goodbye</div>
  </div>
  <div class="Goodnight">
    <div class="inner">Goodnight</div>
  </div>

How can I wrap a div to these 3 div? The result should be:

  <div>
      <div class="Hello">
        <div class="inner">Hello</div>
      </div>
      <div class="Goodbye">
        <div class="inner">Goodbye</div>
      </div>
      <div class="Goodnight">
        <div class="inner">Goodnight</div>
      </div>
  </div>

Update(not work)

<script src="http://code.jquery.com/jquery-1.4.4.js"></script>

<div class="Hello">
  <div class="inner">Hello</div>
</div>
<div class="Goodbye">
  <div class="inner">Goodbye</div>
</div>
<div class="Goodnight">
  <div class="inner">Goodnight</div>
</div>

<script>
$("<div>").insertBefore(".Hello").append(".Hello, .Goodbye, .Goodnight");   
</script>

Updated 2(work)

<script src="http://code.jquery.com/jquery-1.4.4.js"></script>

<div class="Hello">
  <div class="inner">Hello</div>
</div>
<div class="Goodbye">
  <div class="inner">Goodbye</div>
</div>
<div class="Goodnight">
  <div class="inner">Goodnight</div>
</div>

<script>
$("<div>").insertBefore(".Hello").append($('.Hello'), $('.Goodbye'), $('.Goodnight'));  
</script>

Updated 3(not work)

<script src="http://code.jquery.com/jquery-1.4.4.js"></script>

<div class="Hello">
  <div class="inner">Hello</div>
</div>
<div class="Goodbye">
  <div class="inner">Goodbye</div>
</div>
<div class="Goodnight">
  <div class="inner">Goodnight</div>
</div>

<script>
//$("<div>").insertBefore(".Hello").append($('.Hello'), $('.Goodbye'), $('.Goodnight'));    
$(".Hello, .Goodbye, .Goodnight").wrap('div');
</script>

Result:

<div class="Hello">
  <div class="inner">Hello</div>
<div class="Hello">
  <div class="inner">Hello</div>
</div></div>
<div class="Hello">
  <div class="inner">Hello</div>
<div class="Hello">
  <div class="inner">Hello</div>
</div><div class="Goodbye">
  <div class="inner">Goodbye</div>
</div></div>
<div class="Hello">
  <div class="inner">Hello</div>
<div class="Hello">
  <div class="inner">Hello</div>
</div><div class="Goodnight">
  <div class="inner">Goodnight</div>
</div></div>

Thank you

Upvotes: 1

Views: 2830

Answers (1)

David Tang
David Tang

Reputation: 93664

Don't use the .wrap() method. Just create a new div and .append() each element. E.g:

$("<div>")
    .insertBefore(".Hello")
    .append($(".Hello, .Goodbye, .Goodnight"));

The divs will be moved inside, not cloned.

Upvotes: 3

Related Questions