JQuery Wrap Satz von Elementen mit öffnen und schließen Tag

Question

ich von verschiedenen Elementen zum Beispiel festgelegt haben:

<section class="box-1"></section> 
<section class="box-2"></section> 
<section class="box-3"></section> 

Ich möchte alle diese drei Elemente mit div wickeln + Klasse , so dass es wie folgt aussieht:

<div id="new"> 
<section class="box-1"></section> 
<section class="box-2"></section> 
<section class="box-3"></section> 
</div> 

habe ich versucht, die Methoden von jQuery: Wrap, wrapAll vor, nach etc etc keiner von ihnen arbeitet all diese Methodenhinzufügenaber sofort die div schließen etwa so:

<div id="new"></div> 
<section class="box-1"></section> 
<section class="box-2"></section> 
<section class="box-3"></section> 
</div> 

Alles was ich brauche ist eine Methode OPEN div hinzufügen nur vor:

und schließen div nach dem letzten Element

Dank

Answer 1

Verwenden .wrapAll() um die divs zu wickeln. Was Sie zum Identifizieren der einzustellenden Divs verwenden, hängt davon ab, was sonst auf der Seite steht. Wenn sie die einzigen Abschnitte auf der Seite sind, wird $("section").wrapAll("<div class='new' />"); erreichen, was Sie wollen. Wenn nicht, fügen Sie den Abschnitten eine allgemeine Klasse hinzu und verwenden Sie diese, um Ihre divs $(".sel").wrapAll("<div class='new2' />"); zu identifizieren.

$('#button').click(function() { 
 
    $("section").wrapAll("<div class='new' />"); 
 
}); 
 

 

 
$('#button2').click(function() { 
 
    $(".sel").wrapAll("<div class='new2' />"); 
 
});

.new { 
 
    border: 1px solid red; 
 
    padding: 10px; 
 
} 
 

 
.new2 { 
 
    border: 1px solid orange; 
 
    padding: 10px; 
 
} 
 

 
.box { 
 
    background-color: yellow; 
 
    margin: 3px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section class="sel box-1">box 1</section> 
 
<section class="sel box-2">box 2</section> 
 
<section class="sel box-3">box 3</section> 
 

 

 
<input type="button" id="button" value="Click Me" /> 
 

 
<input type="button" id="button2" value="Click Me" />

Answer 2

Select das übergeordnete Element mit $ ('(etwas Eltern)') und versuchen $('parent').prepend("<div id='new'>"). Wenn Sie es schließen müssen, dann $('parent').append("</div>").

Answer 3

Verwenden wrapAll() Methode

$('.box-1,.box-2,.box-3').wrapAll('<div/>')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section class="box-1"></section> 
 
<section class="box-2"></section> 
 
<section class="box-3"></section>

Answer 4

diese Demo (mit anhängen)

$('body').append(
 
    $('<div>', { 
 
     class: 'new' 
 
    }).append(
 
     $.each($('section[class^="box-"]'), function(ndx, elem) { 
 
      return elem; 
 
     }) 
 
    ) 
 
);

.new { 
 
    padding: 10px; 
 
    background: yellow; 
 
} 
 

 
[class^="box-"] { 
 
    padding: 5px; 
 
} 
 

 

 
[class^="box-"]:nth-child(odd) { 
 
    background: #000; 
 
    color: #fff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section class="box-1">sad</section> 
 
<section class="box-2">sad</section> 
 
<section class="box-3">sad</section>