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

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

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, 10h20

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, 10h24

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, 10h28

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, 10h34

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, 10h38

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

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

jQuery

Vue hybride

Discussions similaires

Partager

Partager