récupération des balises h2 [Résolu]

student_php · 29/12/2010, 21h31

Bonsoir,

J'ai un contenu html composé de balises h1 et h2, j'aimerais, par jQuery, créer un sommaire avec des ancres qui renvoient vers les titres (h1) et sous-titres (h2), le code fonctionne pour les balises h1, mais les balises h2 ne s'ajoutent pas au sommaire, je ne comprends pas pourquoi... Voici le code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
  <head>
    <title>Hello World avec jQuery</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  </head>
  <body>
	  <div id="contenu">
 
	  <p>
		Introduction
	  </p>
 
	  <h1>Chapitre Un</h1>
	  <div class="chapitre">
		<h2>Première partie</h2>
		<p>Paragraphes.</p>
 
		<h2>Deuxième partie</h2>
		<p>Paragraphes.</p>
	  </div>
 
	  <h1>Chapitre Deux</h1>
	  <p>Paragraphes.</p>
 
	  <h1>Conclusion</h1>
	  <div class="chapitre">
		<h2>Que retenir ?</h2>
		<p>Paragraphe.</p>
 
		<h2>Remerciements</h2>
		<p>Paragraphe.</p>
	  </div>
 
	</div>
 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript">
 
		$('#contenu').before('<div id="sommaire"><ol class="niveau1"></ol></div>');
		$('#contenu > h1').each(function(i1, titre1)
		{
			$(titre1).attr('id', 'ancre-'+i1);
			$('#sommaire > .niveau1').append('<li id="sommaire-"'+i1+'"><a href="#ancre-'+i1+'">'+$(titre1).text()+'</a></li>');
			if ($('#contenu > h1:eq('+i1+') + div.chapitre').length >= 1)
			{
				alert('toto');
				$('#sommaire-'+i1).after('<ol class="niveau2"></ol>');
				$('#contenu > h1:eq('+i1+') + div.chapitre > h2').each(function(i2, titre2)
				{
					$(titre2).attr('id', 'ancre-'+i1+'-'+i2);
					$('#sommaire > .niveau1 > .niveau2').append('<li id="sommaire-'+i1+'-'+i2+'"><a href="#ancre'+i1+'-'+i2+'">'+$(titre2).text()+'</a></li>');
				});
			}
	   });
    </script>
  </body>
</html>

Le ":eq()" empêche l'accès à la condition (le message "toto" n'apparait pas).

Merci pour l'aide !

danielhagnoul · 30/12/2010, 00h50

Bonsoir

Exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$("#contenu").before('<div id="sommaire"><ol class="niveau1"></ol></div>');
 
$("#contenu").children("h1").each(function(i, item){
	$(item).attr("id", "ancre-" + i);
 
	$("#sommaire")
		.children("ol.niveau1")
		.append('<li id="sommaire-' + i +'"><a href="#ancre-' +
				i + '">' + $(item).text() + '</a></li>');
 
	if($(item).next()[0].tagName === "DIV"){
 
		$("#sommaire-"+i).after('<ol class="niveau2"></ol>');
 
		$(item).next().children("h2").each(function(j, jtem){
			$(jtem).attr("id", "ancre-"+i+"-"+j);
 
			$("#sommaire")
				.find("ol.niveau2")
				.append('<li id="sommaire-' + i + '-' + j + '"><a href="#ancre-' +
						i + '-' + j + '">' + $(jtem).text() + '</a></li>');
		});
	}
});

student_php · 30/12/2010, 10h18

Salut,

Excellent merci beaucoup ! Par contre j'ai deux petites question concernant les lignes:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

if ($(item).next()[0].tagName === "DIV")

Admettons qu'on ai eût des balises "<div></div>" après chaque titres (<h1>), mais qu'on ne veuillent indexer que les div de class "chapitre", j'ai essayé (sans y croire

)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

if ($(item).next()[0].tagName === "DIV.chapitre")

Y a t-il une astuce pour ajouter cette précision ?

ET,

sur la même ligne tu utilise

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

($(item).next()[0].tagName

à quoi sert le "[0]" ? La méthode "next()" peut sélectionner une autre balise que la suivante ? Si tel est le cas, pourquoi fais tu un:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$(item).next().children("h2").each(function(j, jtem)

sans préciser "combien d'éléments il faut sauter" (si j'ai bien compris) ?

Merci encore !

SpaceFrog · 30/12/2010, 11h31

ben suffirait d'utiliser le className...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

next('.chapitre')

non ?

Arnaud F. · 30/12/2010, 11h46

Citation:

Envoyé par student_php

Salut,

Excellent merci beaucoup ! Par contre j'ai deux petites question concernant les lignes:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

if ($(item).next()[0].tagName === "DIV")

Admettons qu'on ai eût des balises "<div></div>" après chaque titres (<h1>), mais qu'on ne veuillent indexer que les div de class "chapitre", j'ai essayé (sans y croire

)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

if ($(item).next()[0].tagName === "DIV.chapitre")

Y a t-il une astuce pour ajouter cette précision ?

Personnellement, j'écrirais :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

if ($(item).next().is("div.chapitre"))

Citation:

Envoyé par student_php

ET,

sur la même ligne tu utilise

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

($(item).next()[0].tagName

à quoi sert le "[0]" ? La méthode "next()" peut sélectionner une autre balise que la suivante ? Si tel est le cas, pourquoi fais tu un:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$(item).next().children("h2").each(function(j, jtem)

sans préciser "combien d'éléments il faut sauter" (si j'ai bien compris) ?

Merci encore !

Next retourne bien un tableau, cependant, on peut appliquer le is directement, car il appliquera la méthode que sur le premier élément du tableau (c'est au cas par cas mais c'est une bonne pratique de mettre le [] au début si l'on ne comprend pas trop ce qu'il se passe derrière tout ça).

danielhagnoul · 30/12/2010, 12h08

Citation:

Envoyé par student_php

Par contre j'ai deux petites question concernant les lignes:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

if ($(item).next()[0].tagName === "DIV")

Admettons qu'on ai eût des balises "<div></div>" après chaque titres (<h1>), mais qu'on ne veuillent indexer que les div de class "chapitre", j'ai essayé (sans y croire

)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

if ($(item).next()[0].tagName === "DIV.chapitre")

Y a t-il une astuce pour ajouter cette précision ?

ET,

sur la même ligne tu utilise

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

($(item).next()[0].tagName

à quoi sert le "[0]" ?

Exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!doctype html>
<html lang="fr">
<head>
	<meta http-equiv="X-UA-Compatible" content="chrome=1">
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<style>
		/* Base */
		body { background-color:#dcdcdc; color:#000000; font-family:sans-serif; font-size:medium; font-style:normal;
		font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 { font-family:serif; }
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img { margin:0px; padding:0px; }
		h1 { font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p { padding:6px; }
		div#conteneur { width:95%; min-width:800px; min-height:500px; margin:12px auto; background-color:#FFFFFF;
		color:#000000; border:1px solid #666666; }
 
		/* Test */
	</style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<div id="conteneur">
 
<div id="contenu">
	<p>
		Introduction
	</p>
 
	<h1>Chapitre Un</h1>
	<div class="chapitre">
		<h2>Première partie</h2>
		<p>Paragraphes.</p>
		<h2>Deuxième partie</h2>
		<p>Paragraphes.</p>
	</div>
 
	<h1>Chapitre Deux</h1>
	<div>
		<p>Un mot pour remplir</p>
	</div>
 
	<h1>Conclusion</h1>
	<div class="chapitre">
		<h2>Que retenir ?</h2>
		<p>Paragraphe.</p>
		<h2>Remerciements</h2>
		<p>Paragraphe.</p>
	</div>
</div>
 
 	</div> 
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
	<script>
		$(function(){
 
$("#contenu").before('<div id="sommaire"><ol class="niveau1"></ol></div>');
 
$("#contenu").children("h1").each(function(i, item){
	$(item).attr("id", "ancre-" + i);
 
	$("#sommaire")
		.children("ol.niveau1")
		.append('<li id="sommaire-' + i +'"><a href="#ancre-' +
				i + '">' + $(item).text() + '</a></li>');
 
	var obj = $(item).next();
 
	if((obj[0].tagName === "DIV") && obj.hasClass("chapitre")){
 
		$("#sommaire-"+i).after('<ol class="niveau2"></ol>');
 
		obj.children("h2").each(function(j, jtem){
			$(jtem).attr("id", "ancre-"+i+"-"+j);
 
			$("#sommaire")
				.find("ol.niveau2")
				.append('<li id="sommaire-' + i + '-' + j + '"><a href="#ancre-' +
						i + '-' + j + '">' + $(jtem).text() + '</a></li>');
		});
	}
});
 
		});
 	</script>
</body>  
</html>

Un objet jQuery peut se manipuler comme un tableau.

Ne pas confondre, nexAll() qui retourne un objet jQuery contenant tous les suivants et next() qui ne retourne que l'élément suivant.

Mais même pour un objet jQuery qui ne contient qu'un élément, on accède à l'élément du DOM par obj[0]

ElementDOM.tagName c'est du JavaScript pur.

danielhagnoul · 30/12/2010, 12h16

Citation:

Envoyé par Arnaud F.

Personnellement, j'écrirais :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

if ($(item).next().is("div.chapitre"))

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
	//if((obj[0].tagName === "DIV") && obj.hasClass("chapitre")){
	if (obj.is("div.chapitre")){

C'est plus direct et plus simple avec is() en effet.

[Edit]
Il y a quelques méthodes jQuery que je n'utilise pas souvent et dont j'oublie l'existence lorsque j'en ai besoin, is() fait partie du lot. Cela fera partie des bonnes résolutions pour l'année prochaine.

student_php · 30/12/2010, 14h03

En effet très pratique cette méthode dans cette situation, sinon merci pour les explications

Je retourne de ce pas m'entrainer, à bientôt !

30/12/2010, 10h18	#3
student_php Membre régulier Inscription : octobre 2010 Messages : 252 Détails du profil Informations forums : Inscription : octobre 2010 Messages : 252 Points : 92 Points : 92	Salut, Excellent merci beaucoup ! Par contre j'ai deux petites question concernant les lignes: Code : Sélectionner tout - Visualiser dans une fenêtre à part if ($(item).next()[0].tagName === "DIV") Admettons qu'on ai eût des balises "<div></div>" après chaque titres (<h1>), mais qu'on ne veuillent indexer que les div de class "chapitre", j'ai essayé (sans y croire ) Code : Sélectionner tout - Visualiser dans une fenêtre à part if ($(item).next()[0].tagName === "DIV.chapitre") Y a t-il une astuce pour ajouter cette précision ? ET, sur la même ligne tu utilise Code : Sélectionner tout - Visualiser dans une fenêtre à part ($(item).next()[0].tagName à quoi sert le "[0]" ? La méthode "next()" peut sélectionner une autre balise que la suivante ? Si tel est le cas, pourquoi fais tu un: Code : Sélectionner tout - Visualiser dans une fenêtre à part $(item).next().children("h2").each(function(j, jtem) sans préciser "combien d'éléments il faut sauter" (si j'ai bien compris) ? Merci encore !
	00

30/12/2010, 11h31	#4
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 001 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 001 Points : 45 077 Points : 45 077	ben suffirait d'utiliser le className... Code : Sélectionner tout - Visualiser dans une fenêtre à part next('.chapitre') non ? __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

30/12/2010, 14h03	#8
student_php Membre régulier Inscription : octobre 2010 Messages : 252 Détails du profil Informations forums : Inscription : octobre 2010 Messages : 252 Points : 92 Points : 92	En effet très pratique cette méthode dans cette situation, sinon merci pour les explications Je retourne de ce pas m'entrainer, à bientôt !
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email