Exemple pour montrer .wrap() et .unwrap()

exemples/jquery/insertion-wrap-et-unwrap/config.json

@@ -0,0 +1,9 @@
+{
+  "title": "Insertion : wrap et unwrap",
+  "category": "misc",
+  "html": [ "example.html" ],
+  "js": [ "script.js" ],
+  "css": [ "styles.css" ],
+  "libsJs": [ "jquery-3.2.1.min.js" ],
+  "libsCss": [ "styles.css" ]
+}

exemples/jquery/insertion-wrap-et-unwrap/example.html

@@ -0,0 +1,10 @@
+<!-- Insertion : wrap et unwrap -->
+<div class="niveau-0">
+  <div class="niveau-2">Hello</div>
+  <div class="niveau-2">Goodbye</div>
+</div>
+
+<div class="niveau-0">
+  <div class="niveau-2">Salut</div>
+  <div class="niveau-2">Au revoir</div>
+</div>

exemples/jquery/insertion-wrap-et-unwrap/script.js

@@ -0,0 +1,11 @@
+// Insertion : wrap et unwrap
+$('.niveau-2').wrap('<div class="niveau-1"></div>');
+
+// On utilise le sélecteur :last pour ne prendre que les .niveau-2
+// de la seconde div.niveau-0, et on supprime la div.niveau-1 ajoutée avant
+$('.niveau-0:last .niveau-2').unwrap();
+
+// On utilise le sélecteur :first pour ne prendre que les .niveau-2
+// de la première div.niveau-0. Mais la restriction avec le sélecteur
+// fait que ça ne fait rien (les .niveau-2 n'ont pas de parent .niveau-99)
+$('.niveau-0:first .niveau-2').unwrap('.niveau-99');

exemples/jquery/insertion-wrap-et-unwrap/styles.css

@@ -0,0 +1,19 @@
+/* styles.css */
+.niveau-0 {
+    margin: 10px 0;
+}
+.niveau-0,
+.niveau-1,
+.niveau-2 {
+    padding: 15px 0 15px 30px;
+    width: 80%;
+}
+.niveau-0 {
+    background: #aaa;
+}
+.niveau-1 {
+    background: #ccc;
+}
+.niveau-2 {
+    background: #eee;
+}