Accéder à un élément précis du DOM

**bpdelavega** · 18/08/2011, 12h15

Bonjour,
Je débute en jQuery, et j'essaye me former, je rencontre une difficulté qui me bloque depuis des heures :
Je veux isoler le comportement d'un élément, mais je n'arrive pas à le cibler, je ne connais pas la syntaxe exacte.
Voici mon 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
 
<div id="onglet1" class="onglet">		
		<script type="text/javascript">								
		   //DEBUT INITIALISATION AU CHARGEMENT
			jQuery(function(){
				jQuery("#pagination1 a:eq(0)").addClass("activepage");
				jQuery(".page_news1").not(":eq(0)").hide();
			});
			//FIN INITIALISATION AU CHARGEMENT
 
			//EVENEMENT SUR CLICK Pagination
			jQuery(function(){
				jQuery("#pagination1 a").click(function(){
				jQuery(".page_news1").hide();	
				jQuery("#pagination1 a").removeClass("activepage");
				jQuery(this.hash).show(); // AFFICHE LE CONTENU DE LA DIV GRACE A UNE ANCRE
				jQuery(this).blur("#pagination1 a").addClass("activepage");		
				return false;
				});
			});
		</script>
 
		<div id="lesnews" style="float: left;">
		<!-- Debut Affichage par page -->					
			<div class="page_news1" id="page1">					
				<div class="ColumnLeft">								
					<h4 class="news_title">SYLVAIN XXXXXX - 8-août-2011 - <strong>5/5</strong></h4>
					<p class="content_news">Bel Hotel, Bon Accueil, Bon petit déjeuner RAS</p>
				</div>
				<div class="clearFloat"></div>    
 
				<div class="ColumnLeft">			
					<h4 class="news_title">ALI EL XXXX - 1-août-2011 - <strong>5/5</strong></h4>
					<p class="content_news">pesrsonnel charmand, très bon acceuil.chambres spacieuses et calmes...</p>
				</div>
				<div class="clearFloat"></div>    	 
		</div>
		<!-- Fin Affichage par page -->
 
		<!-- Pagination -->
		<div id="pagination1" class="onglet1">
			<p>Pages :</p>
			<ul>
				<li><a href="#page1">1</a></li>
				<li><a href="#page2">2</a></li>
			</ul>
			<div class="clear"></div>
			</div>
		</div>
</div>

Ce code se répète 2 fois car il est dans une boucle PHP, c'est pas super optimisé, mais je maitrise pas encore suffisemment.
Je veux faire en sorte de cibler les éléments fils de la DIV "#onglet1" par exemple accéder à "#pagination1", "".page_news1" etc mais en préfixant de la DIV "#onglet1 #paginations1" par exemple, quand je fais "#onglet1 > #paginations1" cela ne fonctionne pas.
Cela me permettrait de modifier mes fonctions jQuery pour isoler les comportements.

D'avance merci pour votre aide

**Golgotha** · 18/08/2011, 12h43

Bonjour,

$("#onglet1 #pagination1") va bien sélectionner l'élément pagination1.

jQuery('ancestor descendant')

A selector to filter the descendant elements.

Description: Selects all elements that are descendants of a given ancestor.
A descendant of an element could be a child, grandchild, great-grandchild, and so on, of that element.

source

Si tu cherche à faire de la pagination avec Jquery il existe des plugins qui marche bien (exemple), déjà tout prêt.

**bpdelavega** · 18/08/2011, 12h45

Bonjour Golgotha,

Merci pour ta réponse, je fais un test, car j'ai déjà utilisé ce principe plusieurs fois, mais là je cale complètement, je vais voir ton exemple, je te tiens au courant.

En fait je m'en était déjà servi ici :
http://www.bookinnfrance.com/group.html

Pour le menu de gauche et pour la pagination, et ça fonctionnait nickel.

Ce qui me gêne c'est que j'ai plusieurs DIV et des fois les comportements se mélangent. Je ne sais pas si tu vois ce que je veux dire.

**bpdelavega** · 18/08/2011, 15h25

Voici le code final :

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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
 
<div id="col-right-map" style="background-color: #fff;padding: 5px;">
 	<script type="text/javascript">								
	   //DEBUT INITIALISATION AU CHARGEMENT
		jQuery(function(){
			jQuery("#menu_vertical a:eq(0)").addClass("actif");
			jQuery(".onglet").not(":eq(0)").hide();
		});
		//FIN INITIALISATION AU CHARGEMENT
 
		//EVENEMENT SUR CLICK Menu Hotels
		jQuery(function(){
			jQuery("#menu_vertical a").click(function(){
			jQuery(".onglet").hide();
			jQuery("#menu_vertical a").removeClass("actif");
			jQuery(this.hash).show(); // AFFICHE LE CONTENU DE LA DIV GRACE A UNE ANCRE
			jQuery(this).blur("#menu_vertical a").addClass("actif");	
			return false;
			});
		});
	</script>
 	<div id="menu_vertical">
		<h3 class="news_title">Voir les commentaires : &nbsp;</h3>		
		<ul> 
			<li><a href="#onglet1">Comfort</a></li>	
			<li><a href="#onglet2">Quality</a></li>
		</ul>
	</div>
	<p>&nbsp;</p><p>&nbsp;</p>
<div id="onglet1" class="onglet">		
		<script type="text/javascript">								
		   //DEBUT INITIALISATION AU CHARGEMENT
			jQuery(function(){
				jQuery("#onglet1 #pagination1 a:eq(0)").addClass("activepage");
				jQuery("#onglet1 .page_news1").not(":eq(0)").hide();
			});
			//FIN INITIALISATION AU CHARGEMENT
 
			//EVENEMENT SUR CLICK Pagination
			jQuery(function(){
				jQuery("#onglet1 #pagination1 a").click(function(){
				jQuery("#onglet1 .page_news1").hide();	
				jQuery("#onglet1 #pagination1 a").removeClass("activepage");
				jQuery(this.hash).show(); // AFFICHE LE CONTENU DE LA DIV GRACE A UNE ANCRE
				jQuery(this).blur("#onglet1 #pagination1 a").addClass("activepage");		
				return false;
				});
			});
		</script>
 
		<div id="lesnews" style="float: left;">
		<!-- Debut Affichage par page -->					
			<div class="page_news1" id="page1">					
				<div class="ColumnLeft">								
					<h4 class="news_title">SYLVAIN XXXXXX - 8-août-2011 - <strong>5/5</strong></h4>
					<p class="content_news">Bel Hotel, Bon Accueil, Bon petit déjeuner RAS</p>
				</div>
				<div class="clearFloat"></div>    
 
				<div class="ColumnLeft">			
					<h4 class="news_title">ALI EL XXXX - 1-août-2011 - <strong>5/5</strong></h4>
					<p class="content_news">pesrsonnel charmand, très bon acceuil.chambres spacieuses et calmes...</p>
				</div>
				<div class="clearFloat"></div>    	 
		</div>
		<!-- Fin Affichage par page -->
 
		<!-- Pagination -->
		<div id="pagination1" class="onglet1">
			<p>Pages :</p>
			<ul>
				<li><a href="#page1">1</a></li>
				<li><a href="#page2">2</a></li>
			</ul>
			<div class="clear"></div>
			</div>
		</div>
</div>
 
<div id="onglet2" class="onglet">		
		<script type="text/javascript">								
		   //DEBUT INITIALISATION AU CHARGEMENT
			jQuery(function(){
				jQuery("#onglet1 #pagination2 a:eq(0)").addClass("activepage");
				jQuery("#onglet1 .page_news2").not(":eq(0)").hide();
			});
			//FIN INITIALISATION AU CHARGEMENT
 
			//EVENEMENT SUR CLICK Pagination
			jQuery(function(){
				jQuery("#onglet1 #pagination2 a").click(function(){
				jQuery("#onglet1 .page_news2").hide();	
				jQuery("#onglet1 #pagination2 a").removeClass("activepage");
				jQuery(this.hash).show(); // AFFICHE LE CONTENU DE LA DIV GRACE A UNE ANCRE
				jQuery(this).blur("#onglet1 #pagination2 a").addClass("activepage");		
				return false;
				});
			});
		</script>
 
		<div id="lesnews" style="float: left;">
		<!-- Debut Affichage par page -->					
			<div class="page_news1" id="page1">					
				<div class="ColumnLeft">								
					<h4 class="news_title">SYLVAIN XXXXXX - 8-août-2011 - <strong>5/5</strong></h4>
					<p class="content_news">Bel Hotel, Bon Accueil, Bon petit déjeuner RAS</p>
				</div>
				<div class="clearFloat"></div>    
 
				<div class="ColumnLeft">			
					<h4 class="news_title">ALI EL XXXX - 1-août-2011 - <strong>5/5</strong></h4>
					<p class="content_news">pesrsonnel charmand, très bon acceuil.chambres spacieuses et calmes...</p>
				</div>
				<div class="clearFloat"></div>    	 
		</div>
		<!-- Fin Affichage par page -->
 
		<!-- Pagination -->
		<div id="pagination2" class="onglet2">
			<p>Pages :</p>
			<ul>
				<li><a href="#page1">1</a></li>
				<li><a href="#page2">2</a></li>
			</ul>
			<div class="clear"></div>
			</div>
		</div>
</div>

Au chargement tout fonctionne bien, mais quand le clique sur mon 2ème onglet, c'est bon, mais quand on commence à cliquer sur les éléments de pagination, l'affichage devient incohérent.

**bpdelavega** · 22/08/2011, 10h46

Ne trouvant pas de solution à mon souci, je clôture la discussion.

**Golgotha** · 22/08/2011, 12h30

Je vais essayez de trouver un peux de temps pour t'aider, ne baisse pas les bras

**bpdelavega** · 22/08/2011, 12h47

Merci beaucoup, c'est gentil

Du coup je suis parti sur d'autres pistes, en installant un plugin qui me fait les onglets mais ça me génère d'autres soucis, donc je suis en standby et reste ouvert à toute proposition (non indécente bien-sûr

)

**bpdelavega** · 23/08/2011, 11h52

Bonjour,

J'ai mis en place une version démo de ma page visible à l'adresse suivante :
http://ns200161.ovh.net/site_cdm/fr/avis-8.html

J'espère que ça permettra d'y voir plus clair.

**Bovino** · 23/08/2011, 12h06

Code :

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

jQuery("#onglet1 #pagination1 a:eq(0)")

cette notation n'est pas très cohérente dans la mesure où un id doit être unique dans une page.
Je pense que

Code :

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

jQuery("#pagination1 a:eq(0)")

serait plus adapté.

**bpdelavega** · 23/08/2011, 12h58

Merci pour la réponse, mais j'avais déjà enlevé ce code là, la dernière version du code est disponible à l'adresse que j'ai donné plus haut et que je redonne à nouveau : http://ns200161.ovh.net/site_cdm/fr/avis-8.html
Encore merci d'avance pour votre aide

**bpdelavega** · 31/08/2011, 13h33

Impossible de trouver la solution, du coup j'utilise un autre procédé, jquery ui tabs et jquery scroll

Accéder à un élément précis du DOM

jQuery

Discussions similaires

Partager

Partager