récupération des balises h2

**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

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

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

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

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 !

récupération des balises h2

jQuery

Discussions similaires

Partager

Partager