Jquery : Obtenir le le tag HTML par sa classe

Bonjour,

Je débute sur jQuery et je suis bloqué sur une manipulation. J'ai appliqué une classe test sur un tableau:

<table class="test">

Cependant cette classe peut se retrouver sur d'autres balises, et pour faire mon plugin j'ai besoin de détecter les balises associées à cette classe test.

J'ai un début de piste :

$(this).each(function(i){
				alert($(this).attr('class'));
			});

Ce code va chercher les attributs class dans le dom.
Il me fait bien un alert de "test".

Je ne trouve pas dans le doc quelquechose qui pourrais me permettre de récupérer le nom de la balise qui porte le nom de cette classe, mais j'imagine qu'une solution doit exister ?

Euh... c'est pas particulier à JQuery, c'est dans javascript : nodeName

alert($(this).attr('class').nodeName); // Affichera 'TABLE'

C'est sur plein de sites, je donne celui-là parce que c'était la première réponse du moteur de recherche et que c'est complet :

http://www.aliasdmc.fr/dom_javascript/javascript_node_nodename.html

@+

Merci bien =)

Petite correction : alert($(this).attr('nodeName'));

Quelque chose m'échappe...

Ce code me renvoi bien les valeurs des nodes :

				$(this).each(function(i){
					alert($(this).attr('nodeName')); // dectecte node
				});

Mais pour que ce soit plus propre je préfère faire des fonctions que je peut réutiliser. Plsu tard elle retournera un array mais déjà j'essaye de comprendre pourquoi ça ne marche pas :

function getAllNode(){
				alert(1);
				$(this).each(function(i){
					alert($(this).attr('nodeName')); // dectecte node
				});
			}
			var arrNode = Array();
			getAllNode();

Ici j'obient undefined dans mon alert.
Je crois avoir vu qu'il y avait une manière spéciale d'écrire les fonctions dans jquery qui permettait de passer l'objet dans la fonction mais je ne retrouve plus le site ou j'avais vu un exemple. Car la this n'est pas visible dans ma fonction, logique en fait, bien que je pensais qu'il était global...

Ton utilisation de nodeName est erronée: il ne s'agit pas d'un attribut, tu ne dois donc pas utiliser la méthode attr pour parvenir à tes fins.

Deuxième chose, lorsque tu récupères un élément via jQuery, tu obtiens un objet sur lequel l'application de nodeName sera inutile. Tu pourras donc procéder de la sorte pour obtenir ton nœud HTML:

$(this).get(0).nodeName;

Bonjour,

Merci pour cette correction.

Cependant j'ai un peu de mal à comprendre get(0)...

D'après la doc, get() retourne un tableau d'éléments.
get(num) retourne l'élément à la position donnée.
celà veut t-il dire qu'en faisant $(this).get(0).nodeName; je recherche le nom du noeud ayant, dans mon cas, la classe ".test" et que je stocke le résultat à l'index 0 du tableau ?

En fait le problème c'est que je sais pas comment faire en javascript pour avoir l'équivalent de print_r ou var_dump php. Du coup je ne connais pas les attributs des objets, c'est un peu ennuyeux...


Sinon voici mon code corrigé. Si tu vois d'autres erreurs... :

(function($){
	$.fn.myZebra = function(option){
		var param = jQuery.extend({
			color1: '#d3ebff',
			color2: '#f1f1f1'
		}, option);

		$(this).each(function(){
			//alert($(this).get(0).nodeName);
			switch($(this).get(0).nodeName){
				case 'TABLE':
					$('tr:odd', this).css({ background: option.color2 });
       			 		$('tr:even', this).css({ background: option.color1 });
					break;
				case 'UL':
					$('li:odd', this).css({ background: option.color2 });
       			 		$('li:even', this).css({ background: option.color1 });
					break;
				case 'DIV':
					//node = $(this).children().attr('nodeName');
					node = $(this).children().get(0).nodeName;
					$(node+':odd', this).css({ background: option.color2 });
       			 		$(node+':even', this).css({ background: option.color1 });
					break;
			}
		});

	};
})(jQuery);