Alternative à "next()", pour simplifier ?

Version imprimable

30/05/2010, 20h43
souffle56

Alternative à "next()", pour simplifier ?

Bonjour,
Je me demandais si il existerait une alternative à ce code:

Code:

$(el).next('div').next('div').next(".Texte_cache").animate(...);

qui me permettrait de le simplifier, en ne précisant que ".Texte_cache" comme élément de recherche
(tous les éléments ici précisés se trouvent sur la même lignée -> ils sont tous frères)
:fleche: Qu'en pensez-vous, SVP ?
30/05/2010, 21h51
danielhagnoul

Bonsoir.

nextAll() ! Déjà vu dans votre discussion précédente !

Un petit effort S.V.P. ! ;)

Code:

$(el).nextAll(".Texte_cache").animate(...);

Code:

1
2
3
4
5
Bonsoir.
 
nextAll() ! Déjà vu dans votre discussion précédente !
 
Un petit effort S.V.P. !

Je sais bien danielhagnoul,

J'ai bien fait l'essai, évidemment, mais seulement, le hic avec "nextAll()", c'est qu'il ne prend pas que l'élément suivant concerné (selon mes besoins du moment) mais aussi... tous ceux qui suivent et sont également concernés ! :roll:
Mais, rien ne vaut un bon exemple, pour exposer ma situation (avec "nextAll" inside):

Code:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">   
<html>   
<head>   
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">   
 
<title>Audio</title>   
 
<script type="text/javascript" src="http://souffle56.fr/Site/1-Trouver_les_ressources/Ressources/js/jquery-1.4.2.min.js"></script>   
<script type="text/javascript" src="http://souffle56.fr/Site/1-Trouver_les_ressources/Ressources/js/jquery-ui-1.8.1.custom.min.js"></script>   
<script type='text/javascript' src="http://souffle56.fr/Site/1-Trouver_les_ressources/Ressources/js/jquery.timers.js"></script>   
<script type='text/javascript'>   
 
	$(function(){ // $(function() -> permet d'attendre que le document HTML et les CSS soient chargés !
		$('.Bouton_plus')
			.mouseenter(entree)
			.mouseleave(sortie)
			.toggle(
				function() {
				  $(this).unbind('mouseleave');
				},
				function() {
				  $(this).bind('mouseleave', sortie);
				}
			);
	})
 
	function entree(e){
		descente(this);
		tooltip();
	}
 
	function sortie(e){
		montee(this);
		reset_tempo();
	}
 
	function descente(el) {
		$(el).unbind('mouseenter'); // Blocage anti-rebonds (si survol répété de l'image)
		$(el).nextAll(".Texte_cache").animate({
			height:'show'
			},900,'easeInOutCirc',function(){$(el).bind('mouseenter', entree);}); // Annulation / Blocage anti-rebonds
	};
	function montee(el) {
		$(el).nextAll(".Texte_cache").animate({
			height:'hide'
			},900);
	};
 
	// y = coordonnée verticale de la souris
	document.onmousemove = function(e){
		if(!e){e = window.event;}
		y = e.clientY;};
 
	i=1; // Nombre d'affichages du tooltip
	function tooltip() {
		if (i==1) {
			// $("#tooltip").css("left", -125).css("top", 3); // Variante -> ajustement y du tooltip à la coordonnéee verticale de l'image [+]
			document.getElementById('tooltip').style.top=y-25+"px";// Ajustement y du tooltip à la coordonnéee verticale y de la souris (précédemment définie)
			$("#tooltip").oneTime("1s", function() { // Si le survol de l'image est > à 5 sec-> le Tooltips apparait (oneTime -> http://plugins.jquery.com/project/timers)
				$("#tooltip").fadeIn(2500).delay(2500).fadeOut(1000);
				i++;
			});
		}
	};
	function reset_tempo() { // Arrêt de la tempo oneTime() si on quitte l'image (stopTime -> http://plugins.jquery.com/project/timers)
		$("#tooltip").stopTime().clearQueue().fadeOut(1000);
	};
 
</script>   
 
</head>   
 
<body bgcolor="#FFFFFF">   
 
<div class="Container" style="width:400px">   
 
    <div class="Bouton_plus">[+]</div>   
    <div>Mon 1er texte</div><div class="Ombre_ligne_d"></div>
    <div class="Texte_cache" style="width:375px; display: none">   
        <span>Je suis plutot content... Je suis plutot content... Je suis plutot content... Je suis plutot content... Je suis plutot content...    
        </span>   
    </div>   
 
    <div class="Bouton_plus">[+]</div>   
    <div>Mon 2eme texte</div><div class="Ombre_ligne_d"></div>  
    <div class="Texte_cache" style="width:375px; display: none">   
        <span>Je suis super content... Je suis super content... Je suis super content... Je suis super content... Je suis super content...    
        </span>   
    </div>   
 
    <div class="Bouton_plus">[+]</div>   
    <div>Mon 3eme texte</div><div class="Ombre_ligne_d"></div> 
    <div class="Texte_cache" style="width:375px; display: none">   
        <span>Je suis super content... Je suis super content... Je suis super content... Je suis super content... Je suis super content...    
        </span>   
    </div>   
 
</div>   
 
</body>   
</html>

Ce genre de fonction, effectivement, pourrait m'intéresser, mais seulement si il était possible de préciser (mais je ne vois pas du tout comment) que l'on ne veut garder que la 1ère occurance rencontrée !

:fleche: Peut-être auriez-vous une suggestion ?

31/05/2010, 00h35
danielhagnoul

Code:

$(el).next('div').next('div').next(".Texte_cache").animate(...);

Ma réponse ne peut être qu'en rapport avec votre question, il m'est impossible de deviner votre code ! Ma boule de cristal est en panne !

D'après votre exemple il s'agissait d'un élément venant après deux autres ! Il n'était précisé nulle part qu'il y avait plusieurs éléments de cette classe.

Mais un sélecteur jQuery est toujours un array, donc $ (...)[0] donne le premier de la liste.

Citation:

Ma réponse ne peut être qu'en rapport avec votre question, il m'est impossible de deviner votre code ! Ma boule de cristal est en panne !

Merci d'accueillir la situation présente avec humour... C'est vrai que je n'ai guère donné de précisions, au début ! Ca se voulait être pour simplifier les choses... Plutôt rapé ! mais bon, comme on dit "C'est l'intention qui compte !" ;)
Sinon, j'ai bien essayé d'intégrer votre proposition dans le code précédent :
Code:

1 2 3 4 5 6 7 8 9 10 11 function descente(el) { $(el).unbind('mouseenter'); // Blocage anti-rebonds (si survol répété de l'image) $(el).nextAll(".Texte_cache[0]").animate({ height:'show' },900,'easeInOutCirc',function(){$(el).bind('mouseenter', entree);}); // Annulation / Blocage anti-rebonds }; function montee(el) { $(el).nextAll(".Texte_cache[0]").animate({ height:'hide' },900); };
mais là, il n'y avait plus de réaction, même en modifiant l'emplacement de [0] dans la ligne !
-> Votre écho à ma question a néanmoins certainement contribué à me rebboster dans ma recherche, car depuis, j'ai découvert ":first" que j'ai intégré comme suit, dans le code:

Code:

$(el).nextAll(".Texte_cache:first").animate(...)

et là, ça fonctionne ! :ccool: et donc... "Résolu !" :) ... Merci à vous !

03/06/2010, 09h41
danielhagnoul

Bonjour.

Bravo pour avoir trouvé une bonne solution !

Il y a :first mais aussi :eq(x) avec x variant de 0 à n = length - 1 !

Voir la description des sélecteurs possibles en fin de http://www.developpez.net/forums/d89...y/#post5152471