Savoir si une div contient tel élément

**Arsene12** · 10/09/2016, 10h17

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

**danielhagnoul** · 10/09/2016, 10h33

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;.

**Arsene12** · 10/09/2016, 15h01

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 :

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

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 :

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

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

**danielhagnoul** · 10/09/2016, 20h37

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 HTML :

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
<!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>

**Arsene12** · 11/09/2016, 02h24

bonjour,

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

Code :

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

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-- ){

**Arsene12** · 11/09/2016, 05h24

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