Accéder à un élément précis du DOM [Résolu]

bpdelavega · 18/08/2011, 11h15

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, 11h43

Bonjour,

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

Citation:

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, 11h45

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, 14h25

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, 09h46

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

Golgotha · 22/08/2011, 11h30

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

bpdelavega · 22/08/2011, 11h47

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, 10h52

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, 11h06

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, 11h58

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, 12h33

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

22/08/2011, 11h30	#6
Golgotha Modérateur cédric Développeur informatique Inscription : août 2007 Messages : 732 Détails du profil Informations personnelles : Nom : cédric Âge : 27 Localisation : France Informations professionnelles : Activité : Développeur informatique Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : août 2007 Messages : 732 Points : 1 562 Points : 1 562	Je vais essayez de trouver un peux de temps pour t'aider, ne baisse pas les bras __________________ modérateur webmasters - développements web & php faq jQuery - règles du forum - faqs web mon espace perso Venez participez au deuxième defi Web !
	00

23/08/2011, 11h06	#9
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 807 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 807 Points : 35 793 Points : 35 793	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é. __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

31/08/2011, 12h33	#11
bpdelavega Membre du Club Brice Ingénieur d'études en développements techniques Inscription : novembre 2005 Messages : 190 Détails du profil Informations personnelles : Nom : Brice Âge : 40 Localisation : France, Paris (Île de France) Informations professionnelles : Activité : Ingénieur d'études en développements techniques Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : novembre 2005 Messages : 190 Points : 55 Points : 55	Finalement je vais utiliser un autre procédé Impossible de trouver la solution, du coup j'utilise un autre procédé, jquery ui tabs et jquery scroll
	00

18/08/2011, 11h45	#3
bpdelavega Membre du Club Brice Ingénieur d'études en développements techniques Inscription : novembre 2005 Messages : 190 Détails du profil Informations personnelles : Nom : Brice Âge : 40 Localisation : France, Paris (Île de France) Informations professionnelles : Activité : Ingénieur d'études en développements techniques Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : novembre 2005 Messages : 190 Points : 55 Points : 55	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.
	00

22/08/2011, 09h46	#5
bpdelavega Membre du Club Brice Ingénieur d'études en développements techniques Inscription : novembre 2005 Messages : 190 Détails du profil Informations personnelles : Nom : Brice Âge : 40 Localisation : France, Paris (Île de France) Informations professionnelles : Activité : Ingénieur d'études en développements techniques Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : novembre 2005 Messages : 190 Points : 55 Points : 55	Ne trouvant pas de solution à mon souci, je clôture la discussion.
	00

22/08/2011, 11h47	#7
bpdelavega Membre du Club Brice Ingénieur d'études en développements techniques Inscription : novembre 2005 Messages : 190 Détails du profil Informations personnelles : Nom : Brice Âge : 40 Localisation : France, Paris (Île de France) Informations professionnelles : Activité : Ingénieur d'études en développements techniques Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : novembre 2005 Messages : 190 Points : 55 Points : 55	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 )
	00

23/08/2011, 10h52	#8
bpdelavega Membre du Club Brice Ingénieur d'études en développements techniques Inscription : novembre 2005 Messages : 190 Détails du profil Informations personnelles : Nom : Brice Âge : 40 Localisation : France, Paris (Île de France) Informations professionnelles : Activité : Ingénieur d'études en développements techniques Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : novembre 2005 Messages : 190 Points : 55 Points : 55	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.
	00

23/08/2011, 11h58	#10
bpdelavega Membre du Club Brice Ingénieur d'études en développements techniques Inscription : novembre 2005 Messages : 190 Détails du profil Informations personnelles : Nom : Brice Âge : 40 Localisation : France, Paris (Île de France) Informations professionnelles : Activité : Ingénieur d'études en développements techniques Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : novembre 2005 Messages : 190 Points : 55 Points : 55	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
	00

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