Jquery parser html

06 août 2009, 14:21

Bonjour,

je souhaite récupérer tous les éléments de type H3 dans ma page, à l'aide de jquery (je démarre tout juste avec).

Voici la structure du titre :
<h3><a>titre</a><span>info comp</span></h3>

L'idée étant de bien séparer le lien du span ..

Merci de votre aide.

06 août 2009, 17:14

Code : Tout sélectionner

$('h3');

Si tu débutes en jQuery, n'hésite pas à en consulter la documentation en ligne.

07 août 2009, 10:02

Y'a pas une version française ? Parce que moi la doc, je suis pas fan en général, alors en anglois ...

Sinon, $('h3') ça renvoie quoi ? Un tableau ?

j'ai tenté de faire un .length dessus, il le prend mal :s

07 août 2009, 10:08

une recherche sur google "tutorial jquery" et hop http://blog.nicolargo.com/2008/01/tutorial-jquery.html

07 août 2009, 10:32

Bonjour,
La philosophie de jquery est un peu déroutante au départ, mais une fois qu'on connait les fonctions de bases, ça devient enfantin!
Pour obtenir le contenu d'un balise, il suffit par exemple:

Code : Tout sélectionner

//code html :
<p id="bla">contenu de mon p</p>

// code jquery:
alert(
    $('#bla').html()
)

Après lorsque tu as plusieurs éléments, tu peux utiliser each, exemple:

Code : Tout sélectionner

//code html :
<p class="bla">contenu de mon p</p>
<p class="bla2">contenu de mon p2</p>
<p class="bla3">contenu de mon p3</p>

// code jquery:
$('p').each(function(){
    alert('classe: '+$(this).attr('class')+'\ncontenu :'+$(this).html());
});

Attention code fait de tête, non testé, il y surement des petites erreurs, mais c'est pour le principe

07 août 2009, 15:15

Après quelques tests,

cet outil est juste formidable.

10 août 2009, 10:25

Quand même je sèche.

J'ai encore un peu de mal à saisir certaines choses de Jquery je pense, malgré la doc et tout ça, j'need help.

Voici mon chteumeul :

Code : Tout sélectionner

<h3><a href="#" id="histo" name="histo" ><img id="im3" src="/images/moins.png" alt="reduire" /></a>Historique des appels</h3>
<div id="histo_appels" class="main_block">

Comment récupérer, en jquery, la balise div suivant le h3 ?

Code : Tout sélectionner

$(document).ready(function(){
  $('h3').each(function(){
    $(this).children("a").clic( function () {
      // selectionner la balise div tout de suite après le h3 (pas ok) - lui appliquer un effet de fadeout (ok)
    });
  });
});

J'ai noté "pas ok" pour ce que je ne parviens pas à faire dans le bout de code au dessus ...

Merci de votre aide.

10 août 2009, 10:55

Une façon d'y arriver serait de sélectionner le parent de H3 et de poursuivre vers le prochain enfant (child), qui serait donc le div en question..

10 août 2009, 11:18

Et pourquoi ne pas prendre directement l'id "histo_appels" ?

10 août 2009, 11:28

Suite à ta réponse, voici le code pour faire cette opération :

Code : Tout sélectionner

$(document).ready(function(){
  $('h3').each(function(){
    $(this).children('a').click( function () {
    	if ($(this).parent().next().is(':hidden')) {
    	  $(this).parent().next().fadeIn();
    	}
    	else {
    		$(this).parent().next().fadeOut();
    	}
    });
  });
});

je ne veux pas toucher directement à l'identifiant pour éviter de faire mon opération sur chaque div.

Le code ci-dessus fonctionne parfaitement, et de manière assez performante à priori ^^

Merci encore de votre aide.

10 août 2009, 11:49

Fin des fignolages, et je découvre la puissance de jquery :

Code : Tout sélectionner

$(document).ready(function(){
  $('h3').each(function(){
	$('#links').append('<li><a href="#' + $(this).children('a').attr('name') + '" title="">' + $(this).text() + '</a></li>');
    $(this).children('a').click( function () {
    	if ($(this).parent().next().is(':hidden')) {
    	  $(this).parent().next().fadeIn();
    	  $(this).children('img').attr('src', '/images/moins.png');
    	}
    	else {
    	  $(this).parent().next().fadeOut();
    	  $(this).children('img').attr('src', '/images/plus.png');
    	}
    	return false;
    });
  });
});

Pour les néophytes qui, comme moi, se demandent ce que jquery peut avoir de si génial, je vous fournis une explication fonctionnelle de ce bout de code :

- Pour chaque balise H3 trouvée dans le document, écrire dans le menu du haut un lien de type ancre vers la balise.
- Si on clique sur l'image fournie dans la balise H3, alors on cache la div qui est en dessous avec la méthode de type fadeIn, et on change l'image fournie dans le lien.
- Si on reclique sur l'image fournie dans la balise H3, alors on affiche à nouveau la div qui est en dessous avec la méthode de type fadeOut, et on remet l'image fournie dans le lien.

Voilà voilà ... c'est écrit en huit lignes de code.

Voici la structure html du document, pour ceux qui veulent tester :

Code : Tout sélectionner

<h3><a href="#" id="cartes" name="cartes" ><img id="im4" src="/images/moins.png" alt="masquer/afficher" /></a>Cartes bancaires</h3>
<div class="main_block" id="cartes_bancaires" >
mouarf
</div>

<h3><a href="#" id="cartes" name="cartes" ><img id="im5" src="/images/moins.png" alt="masquer/afficher" /></a>Cartes bancaires</h3>
<div class="main_block" id="cheques" >
mouarf 2
</div>

10 août 2009, 11:58

/me est content d'avoir pu faire découvrir cet outil

N'hésite pas a essayer d'autres librairies si tu as le temps, dès fois que ça te convienne mieux

Moi j'avoue ne pas avoir fait l'effort d'aller plus loin

10 août 2009, 14:22

mootools est bien aussi (enfin j'aime ^^) et je le trouve plus légère que Jquery et tout ^^

bye hawk

10 août 2009, 14:44

Voilà voilà ... c'est écrit en huit lignes de code.

Et encore, c'est beaucoup pour du Jquery...

Un beau début en tout cas.

Jquery parser html

Qui est en ligne