Savoir si une div contient tel élément

Version imprimable

10/09/2016, 10h17
Arsene12

Savoir si une div contient tel élément

Bonjour,

j'ai une série d'éléments $("#Element"+i) qui s'étale sur plusieurs div (div1, div2, div3,...,div8).
j'aimerai savoir si l'élément $("#Element5") appartient à la div3 par exemple.
Connaitriez-vous la formule svp?
Merci d'avance,

cordialement

Arsène
10/09/2016, 10h33
danielhagnoul

On peut retrouver la division avec parents(), exemple let jObjDiv = $( "#Element5" ).parents( "div" );.

Il faut ensuite disposer d'un moyen d'identification de cette division : un ID, une classe, un attribut "name" ou autre data-*. Exemple : let divID = jObjDiv[0].id;.
10/09/2016, 15h01
Arsene12
bonjour,

merci pour ces indications. Ça marche sur fiddle (clic sur Action puis Action2):

https://jsfiddle.net/qwzq2tgg/1/

mais dans mon application (j'utilise une boucle comprise dans d'autres boucles) ça marche pas.
Code:

1 2 3 4 for (var j = NbreElements; j > 0; j--) { let jObjDiv = $("#MyElem"+j).parents("div"); let divID = jObjDiv[0].id; }
Ça me répond :

Code:

Unexpected identifier |---> let jObjDiv = $("#MyElem"+j).parents("div");

Il faut évidemment modifier le code pour tenir compte des "appends".

N'oubliez pas de cliquer sur "Action" avant de cliquer sur "Action2" pour avoir les éléments dans les divisions "ConteneurX".

Si vous utilisez des navigateurs obsolètes :

il faut remplacer "const" et "let" par "var".
console.log( `Pour ${ str }, la division parente est ${ jObjDiv[0].id }` ); ne fonctionnera pas, il faudra utiliser : console.log( str, jObjDiv[0].id );.

Le code de ma page de test, il suffit de le copier-coller pour le tester :

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
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="author" content="Daniel Hagnoul">
  <title>Test</title>
  <link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-2.0.1.css">
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/le-frog/jquery-ui.min.css">
  <style>
                #maFen div { margin: 2.4rem; }
  </style>
  <script src="https://code.jquery.com/qunit/qunit-2.0.1.js"></script>
  <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
  <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/i18n/jquery-ui-i18n.min.js"></script>
  <script>
    'use strict';
        
    $( function( ){
                        
                        const
                                jObjConteneur1 = $("#Conteneur1"),
                                jObjConteneur2 = $("#Conteneur2");
                                
                         $( "#monBouton" ).on( "click", function( ev ){
                                        $( "#Elem1" ).appendTo( jObjConteneur1 );
                                        $( "#Espace1" ).appendTo( jObjConteneur1 );
                                        $( "#Elem2" ).appendTo( jObjConteneur2 );
                                        $( "#Espace2" ).appendTo( jObjConteneur2 );
                                        $( "#Elem3" ).appendTo( jObjConteneur1 ); 
                                        $( "#Elem4" ).appendTo( jObjConteneur2 ); 
                         });
                         
                });
                                        
                $( window ).on( "load", function( ev ){
                        
                        $( "#monBouton2" ).on( "click", function( ev ){
                                let
                                        jObjDiv = null,
                                        str = "",
                                        NbreElements = 4;
                                        
                                for ( let j = NbreElements; j > 0 ; j-- ){
                                        str = "#Elem" + j;                                      
                                        jObjDiv = $( str ).parents( "div" );
                                        
                                        // debug, console, touche F12
                                        console.log( `Pour ${ str }, la division parente est ${ jObjDiv[0].id }` );
                                }
                                
                        });
                        
    });
  </script>
</head>
<body>
  <main>
		<div id="maFen"> 
			<button id="monBouton">Action</button>
			<button id="monBouton2">Action2</button>
			<div id="Conteneur1"></div>
			<div id="Conteneur2"></div>
			<div id="stock">
				<span id="Elem1">tyuruuruuru</span>
				<span id="Elem2">Atnunc</span>
				<span id="Elem3">Namsole</span>
				<span id="Elem4">rthdgs</span>    
				<span id="Espace1"> </span>  
				<span id="Espace2"> </span>  
			</div>
		</div>
	</main>
  <footer>
    <section class="qunit">
      <div id="qunit"></div>
      <div id="qunit-fixture"></div>
    </section>
  </footer>
</body>
</html>

bonjour,

merci pour ce code. J'ai recopié la portion qui m'intéresse pour mon application :
Code:

1 2 3 4 5 6 7 8 let jObjDiv = null, str = "", NbreElements = 4; for ( let j = NbreElements; j > 0 ; j-- ){ str = "#Elem" + j; jObjDiv = $( str ).parents( "div" );
J'ai l'erreur qui s'est déplacé de ligne. Elle porte maintenant sur :

Uncaught SyntaxError: Unexpected token for |---> for ( let j = NbreElements; j > 0 ; j-- ){

11/09/2016, 05h24
Arsene12

Si je ne déclare pas str, jObjDiv et divID ça marche.

https://jsfiddle.net/qwzq2tgg/4/

Dans mon application, je rencontre un problème : j'ai 8 div et il me renvoie que les 2 premières :calim2:
11/09/2016, 05h39
Arsene12

j'obtiens en alert "Elem5 est situé dans le Conteneur2", ce qui est faux!
11/09/2016, 06h50
Arsene12

Je m'excuse, j'ai fait une erreur, tout marche bien dans mon application. :marteau:

Merci beaucoup pour votre aide précieuse. :merci: