Discussion :

[bpdelavega]

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]

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]

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]

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]

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

[Golgotha]

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