Update insertion wrap/unwrap et ajout filtres contenu

exemples/jquery/filtres-de-contenu/config.json

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

exemples/jquery/filtres-de-contenu/example.html

@@ -0,0 +1,39 @@
+<!-- Filtres de contenu -->
+<h3>Filtre <code>:contains()</code></h3>
+<ul id="liste-films-sf">
+  <li>Blade Runner</li>
+  <li>Interstellar</li>
+  <li>Star Trek</li>
+  <li>Star Wars</li>
+  <li>War of the Worlds</li>
+</ul>
+<ul id="liste-films-autres">
+  <li>Forrest Gump</li>
+  <li>Lone Star</li>
+  <li>The Star</li>
+</ul>
+
+<h3>Filtre <code>:empty()</code></h3>
+<p>
+    Comme on cible tous les éléments vides de la liste <code>#parent</code>,
+    les 2ème et 3ème <code>li</code> correspondent, ainsi que le
+    <code>span</code> dans le 4ème.
+</p>
+<ul id="parent">
+  <li>Enfant non vide</li>
+  <li class="vide"></li>
+  <li></li>
+  <li><span></span></li>
+</ul>
+
+<h3>Filtre <code>:has()</code></h3>
+<p>Ici les <code>div</code> qui contiennent un paragraphe avec la classe
+<code>gras</code> se font ajouter une classe <code>avec-p-gras</code>, qui
+change leur background, et ajoute une astérisque avant le paragraphe (voir CSS).
+</p>
+<div id="demo-filtre-has">
+  <div><p class="souligne">Texte souligné</p></div>
+  <div><p class="souligne gras">Texte souligné et gras</p></div>
+  <div><p class="italique gras">Texte italique et gras</p></div>
+  <div><p class="italique souligne">Texte italique et souligné</p></div>
+</div>

exemples/jquery/filtres-de-contenu/script.js

@@ -0,0 +1,11 @@
+// Filtres de contenu
+
+// : contains
+$("#liste-films-sf li:contains('Star')")
+.css('text-decoration', 'underline');
+
+// :empty
+$("#parent :empty").css('background', 'red');
+
+// :has
+$("#demo-filtre-has div:has('.gras')").addClass('avec-p-gras');

exemples/jquery/filtres-de-contenu/styles.css

@@ -0,0 +1,41 @@
+/* styles.css */
+code {
+  color: #933;
+}
+#parent,
+#parent li {
+  padding: 10px;
+}
+#parent span {
+  padding: 5px;
+}
+#parent {
+  background: #888;
+}
+#parent span {
+  border: 5px solid #888;
+}
+#parent li {
+  list-style-type: none;
+  background: #ddd;
+  margin: 2px;
+}
+
+#demo-filtre-has div {
+  background: #ddd;
+}
+#demo-filtre-has div.avec-p-gras {
+  background: #adc;
+}
+#demo-filtre-has div.avec-p-gras p:before {
+  content: "* ";
+}
+.gras {
+  font-weight: bold;
+}
+.souligne {
+  text-decoration: underline;
+}
+.italique {
+  font-style: italic;
+}

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

@@ -1,14 +1,24 @@
 <!-- Insertion : wrap et unwrap -->
+<h3>Exemple .wrap suivi de .unwrap sans effet</h3>
 <div class="niveau-0">
   <div class="niveau-2">Hello</div>
   <div class="niveau-2">Goodbye</div>
 </div>
 
+<h3>Exemple .wrap suivi de .unwrap qui fonctionne</h3>
 <div class="niveau-0">
   <div class="niveau-2">Salut</div>
   <div class="niveau-2">Au revoir</div>
 </div>
 
+<h3>Exemple .wrapAll (en plus du .wrap initial)</h3>
+<div class="niveau-0">
+  <div class="niveau-3">Hola</div>
+  <div class="niveau-3">Adios</div>
+</div>
+
+
+<h3>Exemple .wrapInner (en plus du .wrap initial)</h3>
 <div class="niveau-0">
   <div class="niveau-2">Hola</div>
   <div class="niveau-2">Adios</div>

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

@@ -1,14 +1,17 @@
 // Insertion : wrap et unwrap
 $('.niveau-2').wrap('<div class="niveau-1"></div>');
 
-// On utilise le filtre :eq(1) 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:eq(1) .niveau-2').unwrap();
-
 // On utilise le filtre :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');
 
-// Exemple wrapAll. Filtre :last pour ne cibler que la dernière div.niveau-0
-$('.niveau-0:last .niveau-2').wrapAll('<div class="niveau-1"></div>');
+// On utilise le filtre :eq(1) 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:eq(1) .niveau-2').unwrap();
+
+// Exemple wrapAll. Filtre :eq(2) pour ne cibler que la troisième div.niveau-0
+$('.niveau-0:eq(2) .niveau-3').wrapAll('<div class="niveau-2"></div>');
+
+// Exemple wrapInner. Filtre :last pour ne cibler que la dernière div.niveau-0
+$('.niveau-0:last .niveau-2').wrapInner('<div class="niveau-3"></div>');

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

@@ -1,19 +1,26 @@
 /* styles.css */
-.niveau-0 {
-    margin: 10px 0;
-}
 .niveau-0,
 .niveau-1,
-.niveau-2 {
-    padding: 15px 0 15px 30px;
+.niveau-2,
+.niveau-3 {
+    padding: 10px 0 10px 20px;
+    box-sizing: border-box;
     width: 80%;
 }
 .niveau-0 {
-    background: #aaa;
+    background: #999;
 }
 .niveau-1 {
-    background: #ccc;
+    background: #bbb;
+}
+.niveau-1-et-demi {
+    border: 5px solid #acb;
+    padding: 10px;
 }
 .niveau-2 {
-    background: #eee;
+    background: #ddd;
+}
+
+.niveau-3 {
+    background: #fff;
 }