When you install WPML and add languages, you will find the flags here to change site language.

jQuery, javascript, sélection et filtrage – Filtrer et sélectionner avec jQuery



La chose la plus bluffante lorsque on débute avec jQuery est bien cette capacité offerte par la librairie à manipuler des éléments dans le flot HTML et de leur ajouter des classes CSS.

Lorsque l’on débute dans le développement javascript, c’est de voir un résultat immédiat dans son navigateur qui importe et donne quelques encouragements à poursuivre dans l’aride voie du Javascript !

On va voir donc comment se bluffer soit même en commençant par les principes les plus faciles de manipulation et du filtrage à l’aide de la librairie jQuery.

Charger jQuery depuis le CDN de google

Par facilité et paresse, on va charger le librairie jQuery directement depuis le CDN (Content Distribution Network) de google qui gracieusement met à disposition la librairie jQuery depuis ses serveurs. Les performances des serveurs de Google seront à coup sûrs meilleurs que n’importe lequel des hébergements.

Deux solutions s’offrent à vous :

  1. Soit vous inscrire pour obtenir une API Key afin d’avoir l’autorisation d’utiliser le CDN de google
  2. Soit d’utiliser directement les éléments par Google en personne dans ces nombreux exemples avec jQuery

On choisit la deuxième méthode, plus facile….

Si vous choisissez de vous inscrire, il faudra déclarer un nom de domaine par exemple http://social.hecube.net/ et vous obtiendrez une clé de ce type
ABQIXXCCe-06-OL6sTKBMYSHQQpzsRR7boKB_9drqOaIQG6MTfDbb1KK6RTYpgqrQMyHAdAmmCqgnc8EbYN8cQ

Insertion complète à placer entre les balises ... de votre page pour tirer profit de jQuery depuis le CDN de Google

<script type="text/javascript" src="https://www.google.com/jsapi?key=ABQIXXCCe-06-OL6sTKBMYSHQQpzsRR7boKB_9drqOaIQG6MTfDbb1KK6RTYpgqrQMyHAdAmmCqgnc8EbYN8cQ"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Insertion avec la méthode proposée par Google

<script type="text/javascript" src="https://www.google.com/jsapi?key=ABQIAAAAe-06-OL7sTKBMYSHQQpzsRR7boKB_8drqOaIQG6MTfDbb1KK6RTYpgqrQMyHAdAmmCqgnc8EbYN8cQ"></script>
<script type="text/javascript">
/*
    *  How to load jQuery with google CDN
    */
    google.load("jquery", "1");
</script>

Utiliser jQuery

Une fois, la librairie jQuery chargée via le CDN de Google, on va pourvoir manipuler quelques éléments HTML genre div, ul, li.

On a dénombré 14 exemples de filtrage et de sélection avec jQuery, utilisant la plupart des fonctions natives de jQuery telles que addClass, siblings(), next(), prev()… etc.

Une illustration du résultat produit dans la cas numéro 2
jQuery, javascript, sélection et filtrage - Filtrer et sélectionner avec jQuery

Voici le fichier HTML qui résume toutes les manipulations sur deux listes contenant : Légumes et Fruits, Animaux.

	<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	   "http://www.w3.org/TR/html4/loose.dtd">
 
	<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>demo jQuery hecube</title>
		<meta name="author" content="Social hecube">
 
		<script src="http://www.google.com/jsapi?key=AIzaSyA5m1Nc8ws2BbmPRwKu5gFradvD_hgq6G0" type="text/javascript"></script>
 
	 	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
 
 
 
 
		<script type="text/javascript">
		var filExemple = {
		  ready : function() {
		    $("a").click(filExemple.findElts);
		  },
 
			// fonction de recherche des &eacute;l&eacute;ments 
		  findElts : function($e)
		  {
		    $e.preventDefault();
 
		    $("*").removeClass("Rose");
 
			// les diff&eacute;rents cas de recherche
		    switch (this.id)
		    {
		      case "filFindLi":
		      {
		        // Trouver tous les li dans ul
		        $("ul").find("li").addClass("Rose");
		        break;
		      }
		      case "filSibLi":
		      {
		        $("li#filPomm").siblings().addClass("Rose");
		        break;
		      }
		      case "filNext":
		      {
		        $("li#filRais").next().addClass("Rose");
		        break;
		      }
		      case "filPrev":
		      {
		        $("li#filLait").prev().addClass("Rose");
		        break;
		      }
		      case "filNextAll":
		      {
		        $("li#filLou").nextAll().addClass("Rose");
		        break;
		      }
		      case "filPrevAll":
		      {
		        $("li#filLou").prevAll().addClass("Rose");
		        break;
		      }
		      case "SelectLeg":
		      {
		        $("li#filRais").prevAll("li.filLeg").addClass("Rose");
		        break;
		      }
		      case "filParents":
		      {
		        $("li#filLait").parents("div#filSelection").addClass("Rose");
		        break;
		      }
		      case "filParent":
		      {
		        $("li").parent("ul").addClass("Rose");
		        break;
		      }
		      case "filChildren":
		      {
		        $("div.Liste").children("h4").addClass("Rose");
		        break;
		      }
		      case "filNot":
		      {
		        $("ul li").not("li.filLeg").addClass("Rose");
		        break;
		      }
		      case "filSlice":
		      {
		        $("ul#filAnimaux li").slice(2, 4).addClass("Rose");
		        break;
		      }
		      case "filAdd":
		      {
		        $("ul#filAnimaux li").add("li#filPoti, li#filEndi").addClass("Rose");
		        break;
		      }
		      case "filEq":
		      {
		        $("ul li").eq(12).addClass("Rose");
		        break;
		      }
		    }
		  }
		};
 
		$(document).ready(filExemple.ready);
 
		</script>
		<style>
		body {
		    font: 16px sans-serif;
		}
		ul {
		    list-style: none;
		    padding: 0;
		    margin: 0;
		    width: 200px;
		}
		li {
		    padding: 3px;
		    margin: 3px;
		}
		div.Liste {
		    float: left;    
		    margin: 0 20px;
		}
		div#Select {
		    clear: left;   
		    padding: 10px;
		}
		.Rose {
		    border: 1px solid #666666;
		    background: #F6177B;
			color:#fff;
		}
		div#filSelection {
		    overflow: hidden;
		}
		</style>
			<!-- Date: 2011-05-07 -->
		</head>
 
		<body>
 
	<!-- begin --><div id="filSelection">
 
		      <div class="Liste">
		          <h4>L&eacute;gumes et Fruits</h4>
		          <ul id="filLegumesFruits">
		             <li class="filLeg" id="filPoti">Potiron</li>
		             <li class="filLeg" id="filEndi">Endives</li>
		             <li class="filLeg" id="filLait">Laitue</li>
		             <li class="filLeg" id="filPomm">Pomme de terre</li>
		             <li class="filFruits">Poire</li>
		             <li class="filFruits">Cerise</li>
		             <li class="filFruits" id="filRais">Raisin</li>
		             <li class="filFruits">Combava</li>
		          </ul>
		      </div>
 
 
		      <div class="Liste">
		          <h4>Animaux</h4>
		          <ul id="filAnimaux">
		             <li id="filPou">Poulet</li>
		             <li id="filVac">Vache</li>
		             <li id="filTig">Tigre</li>
		             <li id="filLou">Loup</li>
		             <li id="filEle">&Eacute;l&eacute;phant</li>
		          </ul>
		      </div>
 
		    </div>
 
 
		<div id="Select">
 
			<ol>
 
				<li><a href="#" id="filFindLi">S&eacute;lectionner toutes les balises <code>li</code> &agrave; l'int&eacute;rieur de la balise <code>ul</code>.</a></li>
				<li><a href="#" id="filSibLi">S&eacute;lectionner toute la parent&eacute; de la balise contenant l'id filPomm.</a></li>
		        <li><a href="#" id="filNext">S&eacute;lectionner la balise <code>li</code> <b>suivant</b> la balise <code>li</code> contentant l'id filRais &agrave; savoir <b>Combava</b></a></li>
		        <li><a href="#" id="filPrev">S&eacute;lectionner la balise <code>li</code> <b>pr&eacute;c&eacute;dente</b> la balise <code>li</code> contenant l' id filLait &agrave; savoir <b>Endives</b>.</a></li>
		        <li><a href="#" id="filNextAll">S&eacute;lectionner toute la parent&eacute; apr&egrave;s la balise contenant l'id filLou.</a></li>
		        <li><a href="#" id="filPrevAll">S&eacute;lectionner toute la parent&eacute; avant la balise contenant l'id filLou</a></li>
				<li><a href="#" id="SelectLeg">S&eacute;lectionner exclusivement les balises <code>li</code> contenant l'id filLeg &agrave; partir de la balise contenant l'id filRais</a>
		        <li><a href="#" id="filParents">S&eacute;lectionner toute la parent&eacute; de l'&eacute;l&eacute;ment <code>div</code> avec l'id filSelection.</a>
		        <li><a href="#" id="filParent">S&eacute;lectionner toute la parent&eacute; des &eacute;l&eacute;ments <code>ul</code> c'est &agrave; dire tous les <code>li</code>.</a>
		        <li><a href="#" id="filChildren">S&eacute;lectionner les balises <code>h4</code> au sein des &eacute;l&eacute;ments <code>div</code> qui poss&egrave;dent la classe Liste.</a>
		        <li><a href="#" id="filNot">S&eacute;lectionner tous les &eacute;l&eacute;ments <code>li</code> au sein des balises <code>ul</code>, &agrave; l'exception des <code>li</code> dont la classe est filLeg.</a>
				<li><a href="#" id="filSlice">S&eacute;lectionner tous les &eacute;l&eacute;ments <code>li</code> compris entre Vache et &Eacute;l&eacute;phant.</a>
		        <li><a href="#" id="filAdd">S&eacute;lectionner tous les <code>li</code> dans la liste des animaux et ajouter les <code>li</code> contenant les classes filPoti et filEndi &agrave; savoir <b>Potiron</b> et <b>Endives</b>.</a>
		        <li><a href="#" id="filEq">S&eacute;lectionner uniquement le dernier <code>li</code> &agrave; savoir <b>&Eacute;l&eacute;phant</b>.</a>
			</ol>
 
 
 
			</div><!-- //end  -->
		</body>
		</html>

En savoir plus