Fonction getelementsbyclass

Commenter

Contenu du snippet

Je pense que le titre est assez explicite : la fonction retourne tout le elements ayant une classe spécifié

Cette source n'est pas de moi : http://www.pcinpact.com/forum/index.php?s=04183db918dad860da2b324f036406ed&showtopic=23880

Source / Exemple : 


/* Retourne tout les elements du documents ayant comme class maClass */    
function getElementsByClass(maClass)
{  
	/*	Tableau comportant les elements de retour*/
	var tabRetour = new Array();
	/*  Tableau temporaire necessaire pour faire la boucle et rechercher
		les elements ayant la classe précisé, il va contenir tout les 
		elements du documents */
	var tabTmp = new Array();
	/* Recupere tout les elements du document */
	tabTmp = document.getElementsByTagName("*");
	/* Compteur, sert à incrementer le tableau des valeurs de retour */
	j=0;
	/* Pour chaque element de tabTmp */
	for (i=0; i<tabTmp.length; i++) { 
		/* on regarde si la classe de l'i-eme element est celle qu'on recherche */ 
		if (tabTmp[i].className==maClass) 
		{  
			/*si oui on ajoute dans notre tableau de retour à l'index j */
			tabRetour[j]=tabTmp[i];
			/* on incremente de 1 j pour pas réecrire l'element suivant par dessus */
			j++;
		}  
	/* Element suivant ... */
	}     
	/* on retourne notre tableau d'elements ayant la classe spécifié*/
   return tabRetour;
} 

Et comme vous me l'avez demandé, voici un exemple d'utilisation :

<head>
   <style type="text/css">
     .pair{height:10px;color:red;}
     .impair{height:15px;color:blue;}
   </style>
   <script language="JavaScript" type="text/javascript">
   function getElementsByClass(maClass) {  
      var tabRetour = new Array();
     var tabTmp = new Array();
     tabTmp = document.getElementsByTagName("*");
     j=0;
      for (i=0; i<tabTmp.length; i++) {  
          if (tabTmp[i].className==maClass) {  
            tabRetour[j]=tabTmp[i];
        j++;
          }  
       }
      return tabRetour;
   }
   function changer(){
     for(var i=0;i<getElementsByClass("pair").length;i++){
       getElementsByClass("pair")[i].style.color="green";
    }
   }
   </script>
</head>
<body>
   <hr class="pair"></hr>
   <hr class="impair"></hr>
   <hr class="pair"></hr>
   <hr class="impair"></hr>
   <hr class="pair"></hr>
   <hr class="impair"></hr>
   <hr class="pair"></hr>
   <hr class="impair"></hr>
   <hr class="pair"></hr>
   <input type="button" value="click" onclick="changer()" />
</body>

Conclusion :


Les commentaires sont toujours la bienvenue.

marche sur IE6 SP2 et Firefox

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (jesusonline)