Autres exemples: sélecteurs + filtres

css/styles.css

@@ -229,4 +229,11 @@ a.active {
 }
 .underlined-text {
   text-decoration: underline;
+}
+.table {
+  border-collapse: collapse;
+}
+.table tr td {
+  border: 1px solid #aaa;
+  padding: 2px;
 }

exemples/liste.json

@@ -1 +1 @@
-[{"slug":"selecteurs-basiques","title":"Sélecteurs basiques"},{"slug":"selecteurs-multiples","title":"Sélecteurs multiples"},{"slug":"ajax-requete-randomuserme","title":"AJAX - Requête randomuser.me"},{"slug":"ajax-requete-themoviedborg","title":"AJAX - Requête themoviedb.org"}]
+[{"slug":"selecteurs-basiques","title":"Sélecteurs basiques"},{"slug":"selecteurs-multiples","title":"Sélecteurs multiples"},{"slug":"ajax-requete-randomuserme","title":"AJAX - Requête randomuser.me"},{"slug":"ajax-requete-themoviedborg","title":"AJAX - Requête themoviedb.org"},{"slug":"selecteurs-filtres","title":"Sélecteurs : filtres"},{"slug":"selecteurs-filtres-2","title":"Sélecteurs : filtres 2"}]

exemples/selecteurs-filtres-2/contenu.html

@@ -0,0 +1,16 @@
+<div id="selecteurs-filtres2">
+    <h5>Filtres spéciaux pour détecter qu'une checkbox est cochée</h5>
+    <p><strong>Notez bien dans ce code HTML</strong> que sous chaque div (parent) il y a deux enfants adjacents, input puis span. Ce sont des "siblings" (terme générique pour frères et soeurs... bref de mêmes parents !)</p>
+    <div>
+      <input type="checkbox" name="a">
+      <span>Mary</span>
+    </div>
+    <div>
+      <input type="checkbox" name="b">
+      <span>Wendy</span>
+    </div>
+    <div>
+      <input type="checkbox" name="c" checked="checked">
+      <span>Peter</span>
+    </div>
+</div>

exemples/selecteurs-filtres-2/script.js

@@ -0,0 +1,13 @@
+// Attention ça se complique un peu...
+// Un nouveau filtre :checked ET un nouveau sélecteur avec le +
+// $( "input:checked" ) prendrait tous les checkbox cochés.
+// :not(:checked) inverse le filtre.
+
+// $( "selecteur1 + selecteur2" ) va sélectionner les éléments correspondant au selecteur2, UNIQUEMENT s'ils sont adjacents à un élément correspondant au selecteur1
+// Donc ici seuls les span se trouvant après un checkbox non coché
+// sont sélectionnés
+$( "input:not(:checked) + span" ).css( "background-color", "yellow" );
+
+// Sur tous les inputs on met l'attribut disabled => on ne peut plus
+// les cocher ou les décocher
+$( "#selecteurs-filtres2 input").attr( "disabled", "disabled" );

exemples/selecteurs-filtres/contenu.html

@@ -0,0 +1,19 @@
+<h5>Filtres :first, :last</h5>
+<table class="table" id="filtres-table1">
+    <tr>
+        <td>1ère ligne, 1ère cellule</td>
+        <td>1ère ligne, 2ème cellule</td>
+    </tr>
+    <tr>
+        <td>2ème ligne, 1ère cellule</td>
+        <td>2ème ligne, 2ème cellule</td>
+    </tr>
+    <tr>
+        <td>3ème ligne, 1ère cellule</td>
+        <td>3ème ligne, 2ème cellule</td>
+    </tr>
+    <tr>
+        <td>4ème ligne, 1ère cellule</td>
+        <td>4ème ligne, 2ème cellule</td>
+    </tr>
+</table>

exemples/selecteurs-filtres/script.js

@@ -0,0 +1,34 @@
+// FILTRES :first et :last
+// Ici un intérêt de find: sans find, on aurait écrit
+// $('#filtres-table1 tr:first,#filtres-table1 tr:last')
+// On a donc fait une première sélection (#filtres-table1)
+// Puis une 2ème au sein de cette première
+$('#filtres-table1')
+.find('tr:first,tr:last')
+.addClass('yellow');
+
+// FILTRES :odd et :even
+// Ici le 1er sélecteur :odd prend les lignes IMPAIRES:
+// 1 et 3 donc, en comptant de zéro, les 2ème et 4ème lignes
+// Puis dans chaque ligne de cette sélection il trouve la
+// dernière cellule et la colore en rouge
+$('#filtres-table1 tr:odd')
+.find('td:last')
+.css('color', '#f00');
+// Même idée avec :even et 1ère cellule, color en bleu
+$('#filtres-table1 tr:even')
+.find('td:first')
+.css('color', '#00f');
+
+
+// FILTRE :eq(n) sélectionne l'élément à l'index n
+$('#filtres-table1 tr:eq(2)')
+.find('td:eq(1)')
+.addClass('green');
+
+// FILTRE :not() = négation
+// Ici :not(.green) va sélectionner toutes les cellules
+// n'ayant pas la classe green et les mettre en gras
+$('#filtres-table1 td:not(.green)')
+.removeClass()
+.css('font-weight', 'bold');