Je n'arrive pas a faire une copie d'une div avec une classe

**ambi86** · 03/02/2016, 10h31

Bonjour,

J'ai un souci avec mon code, j'ai fait un evenement onclick sur un object avec class="ajouter" voila le code :

Code :

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

<a><img class="ajouter" src="ajouter.png" title="ouvrir un nouveau bloc note"> </a>

il est dans une div que j'ai appellé blocNote voila le code :

Code html :

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

1
2
3
4
5
6
7
8
9
<div class="blocNote" post_it_id="1">
		<div class="titre"> <input class="input1" type="text" name="titre" value="Entrez votre titre">  </input>
		<a><img class="fermer" src="fermer.png" title="fermer"></img></a> 
		<a><img class="importer" src="importer.png" title="importer une sauvegarde">
		<a><img class="sauvegarder" src="sauvegarder.png" title="sauvegarder" ></img></a> 
		<a><img class="ajouter" src="ajouter.png" title="ouvrir un nouveau bloc note"> </a>	</div> 	<hr/>
 
		<div contenteditable="true" class="note" >Saisissez vos notes</div>
</div>

En fait je veux que quand on clique sur l'objet avec la class="ajouter" ça fait un clone du div entier j'avais réussi avec un document.getElementById mais quand j'essaie de mettre tout en class(parceque j'aurais plusieurs blocNote si on clique sur ajouter) je n'arrive plus a faire une clone du div alors voila ma fonction javascript :

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
//cliquer sur ajouter
 
	$(".ajouter").on("click",function(){
 
		var ajouter=document.getElementsByClassName('ajouter');
		var blocNote=document.getElementsByClassName("blocNote");
 
		for(var m = 0; m < ajouter.length; m++){
 
			for(var x = 0; x < blocNote.length; x++){
 
				blocNote[x].clone(true).appendTo("blocS")
			}
 
		}
 
	});

Vous allez me dire pourquoi j'appelle une boucle for, c'est tout simplement qu'avec le document.getElementByClassName retourne un tableau de plusieurs élements et non une selection comme un document.getElementById voila et pour la fonction que j'avais mis quand c'etait encore une selection d'id="ajouter" c'est :

Code :

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

1
2
3
4
5
6
7
8
		$("#ajouter").on("click",function(){
 
 
			var copie = $('#blocNote').clone();
	    copie.appendTo('#blocS');
 
 
		})

ca fonctionnait bien avec un id mais avec class ca ne fonctionne pas

Et enfin voila le code html en entier et css au cas ou :

html :

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
<html>
 
<head>
	<title>Post-it</title>
 
	<link href="styles.css" rel="stylesheet" type="text/css" media="all" />
	<link href="http://v4.org/design/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" media="all" />
 
 
	<script type="text/javascript" src="http://v4.org/js/lib/jquery.1.7.2.js"></script>
	<script type="text/javascript" src="http://v4.org/js/lib/jquery-ui-1.8.16.custom.min.js"></script>
 
	<script type="text/javascript" src="js.js"></script>	
</head>
 
 
<body>
 
	<div id="fond">
		<button name="bouton" id="bouton">Cliquez ici</button> <br/>
	</div>
 
	<div class="blocNote" post_it_id="1">
		<div class="titre"> <input class="input1" type="text" name="titre" value="Entrez votre titre">  </input>
		<a><img class="fermer" src="fermer.png" title="fermer"></img></a> 
		<a><img class="importer" src="importer.png" title="importer une sauvegarde">
		<a><img class="sauvegarder" src="sauvegarder.png" title="sauvegarder" ></img></a> 
		<a><img class="ajouter" src="ajouter.png" title="ouvrir un nouveau bloc note"> </a>	</div> 	<hr/>
 
		<div contenteditable="true" class="note" >Saisissez vos notes</div>
	</div>
 
 
	<div id="blocS" style="position:absolute;">
 
	</div>
 
</body>
 
</html>

css :

Code css :

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
body{position:relative;margin:0;padding:0;background:#E0E4E5;}
 
#bouton {color: red;padding:0;margin:0;}
#fond{width:1871px;height:953px;margin:0;padding:0;position:absolute;background-color:none;background-position:0px;background-repeat:repeat-x;}
 
.blocNote{padding:0 10px 0 10px;max-height:600px;max-width:600px;display:none;background:#FEFEBA;position:absolute;border:1px solid black;height:100px;width:235px;border-radius:5px;padding:5px 5px;line-height:20px;font-size:13px;margin-left:41.5%;margin-top:10%;min-width:235px;min-height:150px;}
 
.titre{display:inline-block;width:100%}
.titre input {text-align:center;height:30%;min-height:30px;max-height:30px;max-width:400px;width:60%;color:#989E9D;border:1px solid black;border-radius:2px;}
.fermer {float:right;line-height:11.5px;text-decoration:none;width:10px;}
.importer {float:right;line-height:11.5px;text-decoration:none;width:10px;padding-right:5px;}
.sauvegarder {float:right;line-height:11.5px;text-decoration:none;width:10px;padding-right:5px;}
.ajouter {float:right;line-height:11.5px;text-decoration:none;width:10px;padding-right:5px;}
 
.note {position:relative;color:#989E9D;border:1px solid black;border-radius:2px;background: white;width:100%;text-align:center;word-wrap:break-word;height:70%;boder:0 5px 0 5px;line-height:800%;overflow:auto;}
 
.blocNote a{cursor:pointer;}

Merci de me repondre

**SylvainPV** · 03/02/2016, 11h20

Pourquoi mélanger du jQuery avec des fonctions natives et peu supportées du DOM comme getElementsByClassName ? Autant tout faire en jQuery, c'est bien plus pratique.

Code :

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

appendTo("blocS")

Ce sélecteur n'est pas bon, si c'est un ID rajoute un # et si c'est une classe, rajoute un point devant.

**ambi86** · 03/02/2016, 11h24

mais je precise que je suis absolument pas encore un developpeur logiciel je suis encore en phase d'apprentissage et pour ta reponse je vais changer mon selecteur.
Merci d'avoir pris la peine de lire ma demande et de me repondre

**ambi86** · 03/02/2016, 11h28

j'ai bien changer ma selecteur comme ceci :

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
 
$(".ajouter").on("click",function(){
 
		var ajouter=document.getElementsByClassName('ajouter');
		var blocNote=document.getElementsByClassName("blocNote");
 
		for(var m = 0; m < ajouter.length; m++){
 
			for(var x = 0; x < blocNote.length; x++){
 
				blocNote[x].clone(true).appendTo("#blocS")
			}
 
		}
 
	});

mais ca ne fonctionne toujours pas

**SylvainPV** · 03/02/2016, 11h34

Je vois que le lien que tu utilises pour charger jQuery, http://v4.org/js/lib/jquery.1.7.2.js ; ne pointe pas vers jQuery mais vers une page HTML bizarre qui charge un autre script depuis un site sedoparking.com

J'ai l'impression qu'on est pas au bout de nos peines...

**ambi86** · 03/02/2016, 11h38

non il y a pas de souci pour le lien le jquery fonctionne bien j'ai d'autres fonctions qui marchent par exemple quand je clique sur fermer :

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
 
	//cliquer sur fermer
	$('.fermer').on('click', function(){
		var fermer=document.getElementsByClassName('fermer');
		var blocNote=document.getElementsByClassName("blocNote");
 
		for(var m = 0; m < fermer.length; m++) {
 
			for(var x = 0; x < blocNote.length;x++){
 
				if (confirm("Vous desirez vraiment fermer?")) {	
				blocNote[x].style.display="none";				
				}
				else {	
				}	
			}	
		} 
	});

**SylvainPV** · 03/02/2016, 11h52

J'imagine que tu es sur un réseau interne et que le reste du monde n'a pas accès à ces URL. Le problème c'est que de ce fait je ne peux pas tester ton code, ni m'assurer que ce que tu reçois est une version non modifiée de jQuery.

Tu vois des erreurs en console JavaScript ? Avec l'inspecteur de développement (F12), est-ce que tu vois les éléments HTML s'ajouter dans le document ? C'est peut-être juste un problème de CSS, vu le positionnement absolu que tu appliques.

**ambi86** · 03/02/2016, 12h01

il me mets une erreur comme quoi blocNote[x].clone is not a function :

Nom : cap.png
Affichages : 100
Taille : 235,4 Ko

et voila le debogueur :
Nom : cap2.png
Affichages : 94
Taille : 73,2 Ko

**SylvainPV** · 03/02/2016, 12h31

Ah exact, tu ne peux pas appliquer des fonctions jQuery sur des éléments avec une boucle for comme ça. Il faut utiliser la fonction get: https://api.jquery.com/jquery.get/

**ambi86** · 03/02/2016, 12h46

je ne comprends pas trop comment utiliser get dans cette situation je ne veux pas charger une page php je vais juste exécuter une fonction javascript tu peux m'expliquer stp

**SylvainPV** · 03/02/2016, 14h52

Pardon j'étais pressé et je me suis trompé de page de documentation, je faisais référence à celle-là : https://api.jquery.com/get/

Il y a aussi eq : https://api.jquery.com/eq/

En gros au lieu de faire blocNote[x] tu écris blocNote.eq(x) ou $(blocNote.get(x))

**ambi86** · 03/02/2016, 15h09

il remet la meme erreur comme quoi blocNote.eq is not a function et aussi quand je met $(blocNote.get(x))

Nom : cap.png
Affichages : 92
Taille : 180,8 Ko

**SylvainPV** · 03/02/2016, 15h11

Comme indiqué précedemment, utilise jQuery pour sélectionner les éléments et non document.getElementsByClassName. Là tu essaies d'appliquer des fonctions jQuery sur des éléments récupérés sans passer par jQuery, ça ne peut pas marcher.

**ambi86** · 03/02/2016, 15h16

D'accord merci beaucoup ça fonctionne !!!!

Génial voilà la capture pour le résultat :
Nom : CAP.png
Affichages : 101
Taille : 114,2 Ko

**ambi86** · 03/02/2016, 15h19

j'ai effectivement mis tout en jquery et ca fonctionnne !! merci
voila la fonction :

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
	//cliquer sur ajouter
 
	$(".ajouter").on("click",function(){
 
		var ajouter=$('.ajouter');
		var blocNote=$(".blocNote");
 
		for(var m = 0; m < ajouter.length; m++){
 
			for(var x = 0; x < blocNote.length; x++){
 
				$(blocNote.get(x)).clone(true).appendTo("#blocS")
			}
 
		}
 
	});

merci encore.

Je n'arrive pas a faire une copie d'une div avec une classe

jQuery

Discussions similaires

Partager

Partager