Comment pourrais-je remplacer « $(this).next() » par les 7 suivants ?

**ted00** · 13/02/2010, 12h59

Bonjour,

Est-ce quelqu'un pourrait me dire comment je pourrais remplacer le $(this).next par les 7 suivant .message_body avec ce code :

Code :

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

1
2
3
4
5
6
 
	$(".message_head").click(function(event){
		//alert($(event.target));
		$(this).next(".message_body").slideToggle(500)
		return false;
	});

Merci,
Ted

**Bovino** · 13/02/2010, 14h42

Code :

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

$(this).next(".message_body:lt(7)").slideToggle(500)

devrait fonctionner

**ted00** · 14/02/2010, 10h57

Merci, pour cette réponse.

La ligne de code que tu m'as donnée fonctionne bien quand j'ai mes éléments .message_body juste après .message_head.

Comment je peux faire si mes .message_body se trouve dans d'autres colonnes d'un tableau.

Merci,
Ted

**Bovino** · 15/02/2010, 12h41

C'est pas trop possible de te répondre sans connaitre la structure de ta page ni quels éléments au juste tu souhaites récupérer.

**ted00** · 15/02/2010, 13h10

sorry, en faite j'aimerai que qaund on clic sur + tous les message_body qui sont dans le tr soit affichés.

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
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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
    <script src="js/jquery-1.js" type="text/javascript"></script>
	<script src="js/ui.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 
	//hide message_body after the first one
	$(".message_list .message_body:gt(0)").hide();
	$(".message_body").slideUp(0)
 
	//hide message li after the 5th
	//$(".message_list li:gt(4)").hide();
 
 
	//toggle message_body
	$(".message_head").click(function(event){
		//alert($(event.target));
		$(this).next(".message_body:lt(7)").slideToggle(500);
 
		return false;
	});
 
	//collapse all messages
	$(".collpase_all_message").click(function(){
		$(".message_body").slideUp(500)
		return false;
	});
 
	//show all messages
	$(".show_all_message").click(function(){
		$(this).hide()
		$(".show_recent_only").show()
		$(".message_list li:gt(7)").slideDown()
		return false;
	});
 
	//show recent messages only
	$(".show_recent_only").click(function(){
		$(this).hide()
		$(".show_all_message").show()
		$(".message_list li:gt(4)").slideUp()
		return false;
	});
 
});
</script>
<style type="text/css">
 
/* message display page */
.message_list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.message_list li {
	padding: 0;
	margin: 0;
}
.message_head {
	padding: 5px 10px;
	cursor: pointer;
	position: relative;
}
.message_head .timestamp {
	color: #666666;
	font-size: 95%;
	position: absolute;
	right: 10px;
	top: 5px;
}
.message_head cite {
	font-size: 100%;
	font-weight: bold;
	font-style: normal;
}
.message_body {
	padding: 5px 10px 15px;
	background:#000033;
	color:#FFFFFF;
}
.collapse_buttons {
	text-align: right;
	border-top: solid 1px #e4e4e4;
	padding: 5px 0;
	width: 383px;
}
.collapse_buttons a {
	margin-left: 15px;
	float: right;
}
.show_all_message {
	background: url(img/tall-down-arrow.gif) no-repeat right center;
	padding-right: 12px;
}
.show_recent_only {
	display: none;
	background: url(img/tall-up-arrow.gif) no-repeat right center;
	padding-right: 12px;
}
.collpase_all_message {
	background: url(img/collapse-all.gif) no-repeat right center;
	padding-right: 12px;
	color: #666666;
}
</style>
</head>
 
<body>
<table width="100%" border="1" bordercolor="#FFFFFF" bgcolor="#CCCCCC" class="message_list">
  <tr>
    <th scope="col">&nbsp;</th>
    <th scope="col">Lun</th>
    <th scope="col">mar</th>
    <th scope="col">mer</th>
    <th scope="col">jeu</th>
    <th scope="col">vend</th>
    <th scope="col">sam</th>
    <th scope="col">dim</th>
  </tr>
  <tr id="id_1">
    <td><div class="message_head">+</div></td>
    <td><div class="message_body">rdv 0<br/>rdv 0a</div></td>
    <td><div class="message_body">rdv 1</div></td>
    <td><div class="message_body">rdv 3</div></td>
    <td><div class="message_body">rdv 4</div></td>
    <td><div class="message_body">&nbsp;</div></td>
    <td><div class="message_body">&nbsp;</div></td>
    <td><div class="message_body">&nbsp;</div></td>
  </tr>
  <tr>
    <td><div class="message_head">+</div></td>
    <td><div class="message_body">&nbsp;</div></td>
    <td><div class="message_body">rdv 5</div></td>
    <td><div class="message_body">&nbsp;</div></td>
    <td><div class="message_body">&nbsp;</div></td>
    <td><div class="message_body">&nbsp;</div></td>
    <td><div class="message_body">&nbsp;</div></td>
    <td><div class="message_body">&nbsp;</div></td>
  </tr>
  <tr>
    <td><div class="message_head">+</div></td>
    <td><div class="message_body">rdv 8</div></td>
    <td><div class="message_body">&nbsp;</div></td>
    <td><div class="message_body">&nbsp;</div></td>
    <td><div class="message_body">&nbsp;</div></td>
    <td><div class="message_body">rdv 7</div></td>
    <td><div class="message_body">&nbsp;</div></td>
    <td><div class="message_body">&nbsp;</div></td>
  </tr>
</table>
 
<p class="collapse_buttons"><a href="#" class="collpase_all_message">Collapse all</a></p>
 
</body>
</html>

Merci,
Ted

**Macois** · 18/02/2010, 10h05

Bonjour à tous,

Le problème vient du fait que ta structure html ne convient pas à ton code Js ou vice versa.

En effet, le code suivant :

Code :

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

1
2
3
4
5
6
7
//toggle message_body
	$(".message_head").click(function(event){
		//alert($(event.target));
		$(this).next(".message_body:lt(7)").slideToggle(500);
 
		return false;
	});

ne peut marcher que si les éléments .message_body sont au même niveau d'arborescence html que .message_head or ces deux classes appartiennent à des éléments html qui ne sont pas dans le même niveau d'arborescence

Code :

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

1
2
3
4
5
 <tr id="id_1">
    <td><div class="message_head">+</div></td>
    <td><div class="message_body">rdv 0<br/>rdv 0a</div></td>
   [...]

Donc tu d'abord remonter de ton div à ton ancêtre td ou tr pour "voir"/"manipuler" les .message_body.

Ceci n'est pas le "meilleur" code, loin de là mais il est là pour l'exemple

Code :

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

1
2
3
4
5
6
7
//toggle message_body
	$(".message_head").click(function(event){
		//alert($(event.target));
		$(this).parents("tr.week_line").find(".message_body").show();
 
		return false;
	});

Code :

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

1
2
3
4
5
6
7
8
9
10
<tr id="id_1" class="week_line">
    <td><div class="message_head">+</div></td>
    <td><div class="message_body">rdv 0<br/>rdv 0a</div></td>
    <td><div class="message_body">rdv 1</div></td>
    <td><div class="message_body">rdv 3</div></td>
    <td><div class="message_body">rdv 4</div></td>
    <td><div class="message_body">&nbsp;</div></td>
    <td><div class="message_body">&nbsp;</div></td>
    <td><div class="message_body">&nbsp;</div></td>
  </tr>

N'hésite pas si tu as des questions

A bientot !

**ted00** · 18/02/2010, 11h26

Merci pour les infos, c'est super ça marche.

Ted

Comment pourrais-je remplacer « $(this).next() » par les 7 suivants ?

jQuery

Discussions similaires

Partager

Partager