Recuperer un grand-parent en particulier

Version imprimable

15/07/2013, 10h11
Tendhor57

Recuperer un grand-parent en particulier
Bonjour,

Voilà mon code html se compose de la manière suivante:
Code:

1 2 3 4 5 <li class="Menu"><span id="trait"> Trait</span> <ul class=subMenu> <img id="oeil_actif" src="..." style="width:23px; height:19px"/> </ul> </li>
Je souhaiterais lorsque je clic sur l'image "oeil_actif" récupérer l'id de son grand-parent (ici au clic je souhaite récupérer l'id "trait").

J'ai bien tenté cela:
Code:

1 2 3 $("#oeil_actif").click(function(){ console.log($("#oeil_actif").parent().parent()); });
Cela me renvoi l'objet [li.Menu] ce qui se rapproche de ce que je souhaite, car de la faut encore que je récupère le span et ensuite l'id de celui-ci. Et donc je trouve cela long et fastidieux pour juste recupérér l'id d'un grand-parent :?

D'ou ma question ici y a t'il un moyen moins fastidieux d'obtenir mon grand-parent qui à l'id ''trait" ?

D'avance merci.
15/07/2013, 10h26
saymoneu

Bonjour,

Le span "trait" n'est pas un parent de votre image, vous ne risquez pas de le trouver directement avec parent() :)
C'est plutot un élément "frere" du "parent" de votre image(un oncle quoi :mrgreen:).

Code:

console.log($("#oeil_actif").parent().prev().attr('id'));

devrait marcher

Ok cela marche bien merci, mais finalement cela n'arrange pas mon problème :calim2:.

En faite ce que je souhaitais faire c'est ceci:

Code:

1
2
3
4
5
6
7
8
9
<li class="Menu"><span id="trait"> Trait</span>
            <ul class=subMenu>
                     <img id="oeil_actif" src="..." style="width:23px; height:19px"/>
                 </ul>
              <li class="Menu"><span id="point"> Point</span>
            <ul class=subMenu>
                     <img id="oeil_actif" src="..." style="width:23px; height:19px"/>
                 </ul>
</li>

De la si je fais cela:

Code:

1
2
3
$("#oeil_actif").click(function(){
       console.log($("#oeil_actif").parent().prev().attr('id'));
});

Cela me renvoi bien trait mais pas "poin" quand je clic sur l'autre oeil :? , et:

Code:

1
2
3
$("#oeil_actif").click(function(){
       console.log($(this).parent().prev().attr('id'));
});

Ne change pas l a situation, des idees ?

Finalement cela marche très bien, j'ai simplement fais une erreur de débutant :oops: j'ai considéré tout mes images "oeil_actif" comme des id, alors qu'il fallait que je les passent en class :?

Pour ceux que celaintéresse voici le code final:
Code:

1 2 3 4 5 6 7 8 9 <li class="Menu"><span id="trait"> Trait</span> <ul class=subMenu> <img class="oeil_actif" src="..." style="width:23px; height:19px"/> </ul> <li class="Menu"><span id="point"> Point</span> <ul class=subMenu> <img class="oeil_actif" src="..." style="width:23px; height:19px"/> </ul> </li>
Et le Jquery nous donne donc
Code:

1 2 3 4 5 $(".oeil_actif").click(function(){ var toto=$(this).parent().prev().attr('id'); console.log(toto); });
Cela m'affiche bien point ou trait en fonction de la ou je clic :ccool:

Merci

15/07/2013, 10h59
Bovino

Ta structure HTML est assez maladroite...
Tu devrais systématiquement fermer tes balises, on y verrait un peu plus clair.
Une balise <ul> doit contenir des <li>, pas des images...
15/07/2013, 13h09
Tendhor57

Je suis d'accord avec toi, j'ai oublié la balise </ul> cela venant du fais que je n'ai copié qu'une partis de mon code et donc j'ai oublié de fermer ma balise <ul>.

Sinon pour ce qui est de mon image dans une <li> cela est pour ce que je suis entrain de faire "nécessaire" car l'utilisation des <ul> et <il> n'est pas la pour faire une liste d'objet.

En faite il s'agit d'une structure que j'ai été obligé je mettre en place afin de pouvoir faire fonctionner dessus un "plugin Jquery" que j'ai récupérer sur un site.

Et donc soit je transformé tout mes <ul> et <li> en <div> et dans ce cas la je devais me farcir + de 400 ligne de code du "plugin jquery" afin d'adapter celui-ci avec mes div, pas forcément bien :aie:.

Ou soit je partais sur la base des <ul> et <li> afin que je puisse utiliser ce "plugin" sans me soucier de ce qu'il ya dedans.

D'ou mon choix de mettre mes images dans des <li> même si cela n'est pas très correcte en soi .
15/07/2013, 13h41
Bovino
Citation:

l'utilisation des <ul> et <il> n'est pas la pour faire une liste d'objet

Si une liste n'est pas là pour faire une liste, j'y perds mon latin... :koi:

Citation:

Sinon pour ce qui est de mon image dans une <li>

Ben moi, c'est pas tout à fait ce que je lis... :roll:
Code:

1 2 3 <ul class=subMenu> <img class="oeil_actif" src="..." style="width:23px; height:19px"/> </ul>
Tu peux tout à fait mettre des images dans des <li>, c'est dans des <ul> que c'est moins bien.
16/07/2013, 08h01
Tendhor57

En faite pour faire très simple mon "plugin" utilise en quelque sorte mes <li> pour y appliquer une "animation", hors ne souhaitant pas que l'image soit "animer" mais voulant seulement que celle-ci soit présente (car c'est en cliquant sur cette image que mon animation se fait) et du fait de l'obligation de l'utilisation de lastructure <ul><li>, j'ai pas trouvé plus simple que de faire comme ceci.

A la rigeur je peut toujours encapsuler mon image dans une <div> qui se trouvera à l'intérieur du <ul> mais je pense pas que cela apportera plus :aie:

Enfin toujours est t'il tout fonctionne bien maintenant :ccool:

Citation:

Il n'est pire sourd que celui qui ne veut pas entendre.

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
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0">
	<meta name="author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/headjs/0.99/head.min.js"></script>
	<script>
		"use strict";
 
		head.js( 
			"http://d3js.org/d3.v3.min.js",
			"http://code.jquery.com/jquery-2.0.3.min.js",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/i18n/jquery-ui-i18n.min.js",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js",
			"http://danielhagnoul.developpez.com/lib/dvjh/d3Base.js",
			function(){
 
				$( function(){
 
$( "img.oeil_actif" ).on( "mouseenter", function(){
	$( this )
    	.parents( "li.menu" )
    	.children( "span" )
    	.eq( 0 )
    	.text( "je suis actif" )
    	.css( "color", "red" );
});
 
$( "img.oeil_actif" ).on( "mouseleave", function(){
	$( this )
    	.parents( "li.menu" )
    	.children( "span" )
    	.eq( 0 )
    	.text( "je suis inactif" )
    	.css( "color", "black" );
});
 
				});
 
				$( window ).load( function(){
 
				});
			}
		);
	</script>
	<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/sunny/jquery-ui.min.css">
	<style>
		/* TEST -- Nota bene : ici 1 rem est égal à 1 px, voir dvjhRemBase.css */
 
	</style>
</head>
<body>
	<header>
		<hgroup>
			<h1>Forum jQuery</h1>
			<h2>
				<a href="">Lien</a>
			</h2>
		</hgroup>
	</header>
	<section class="conteneur">
 
<ul>
    <li class="menu"> <!-- menu en minuscules ! -->
        <span id="trait">Trait</span>
        <ul class=subMenu>
            <li>
                <img class="oeil_actif" src="http://danielhagnoul.developpez.com/images/arrow-down_24.gif">
            </li>
        </ul>
    </li>
    <li class="menu">
        <span id="point">Point</span>
        <ul class=subMenu>
            <li>
                <img class="oeil_actif" src="http://danielhagnoul.developpez.com/images/arrow-back_24.gif">
            </li>
        </ul>
    </li>
</ul>
 
	</section>
	<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
		<time datetime="2013-07-16T14:00:59.58+02:00" pubdate>2013-07-16T14:00:59.58+02:00</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
		<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
		<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
		<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
	</footer>
</body>
</html>