récupération des balises h2

Version imprimable

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:

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 !

Bonsoir

Exemple :

Code:

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>');
		});
	}
});

30/12/2010, 10h18
student_php

Salut,

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

Code:

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 :lol:)

Code:

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:

($(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:

$(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 ! :ccool:
30/12/2010, 11h31
SpaceFrog

ben suffirait d'utiliser le className...

Code:

next('.chapitre')

non ?
30/12/2010, 11h46
Arnaud F.

Citation:

Envoyé par student_php

Salut,

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

Code:

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 :lol:)

Code:

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

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

Personnellement, j'écrirais :

Code:

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

Citation:

Envoyé par student_php

ET,

sur la même ligne tu utilise

Code:

($(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:

$(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 ! :ccool:

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).

Citation:

Envoyé par student_php

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

Code:

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 :lol:)

Code:

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:

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

à quoi sert le "[0]" ?

Exemple :

Code:

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.

30/12/2010, 12h16
danielhagnoul
Citation:

Envoyé par Arnaud F.

Personnellement, j'écrirais :

Code:

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

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. ;)
30/12/2010, 14h03
student_php

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

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