Discussion :

[Fredy007]

Bonjour,

Je fais l'événement clone sur un formulaire, sur lequel je clique sur un bouton et faire copier ce qui est entre la balise div.origin et le coller après le dernier élément (à la fin du document), DEMO


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
  <form id="frmImport" name="frmImport" method="post" enctype="multipart/form-data" >
 
<div class="origin">
  <div class="upImage" id="up1">
        <label for="file-input1">
            <img src="https://cdn3.iconfinder.com/data/icons/blackblue/128/iPhoto.png" id="file1">
        </label>
        <input id="file-input1" type="file"/>
        <div class="txt1">Text1</div>
    </div>
 
</div>
 
<div class="newUps"></div>
 
        <div style="clear: both;"></div> 
 
        <br><br><br>
        <button class="newUp">New</button>
 
        </form>

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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
/* Upload image Start */
.upImage > input
{
    display: none;
}
 
.upImage img {
    width: 170px;
    height: 170px;
    cursor: pointer;
}
 
.upImage{
    border: 2px dotted gray;
    width: 170px;
    height: 170px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    float: left;
    margin: 10px;
}
 
.upDesc{
    border: 0px solid gray;
    width: 170px;
    height: auto;
    float: left;
    margin: 10px;
    text-align: center;
}
/* Upload image EnD */

jQuery

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
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
//$('.newUp').on('click', function(){
 
$('body').on('click', '.newUp', function(){
 
 
// get last id
var lastID	= $('#frmImport input:file').length;
//console.log(lastID);
 
// increment by 1
var incID	= lastID + 1;
//console.log(incID);
 
var original = $('#up1').parent();
//console.log(original);
 
// make clone
var cloned = $('.origin').children().clone(true);
//var cloned = $('.origin').clone(true);
//var cloned = $('#up1').before('.origin').clone();
//console.log(cloned);
 
var newCloned = $(cloned).each(function(x, y){
	//console.log(y);
 
  // we need to attribute new ids for the y
  $('#up1', y).attr('id', 'up'+incID);
	$('#file1', y).attr('id','file'+incID);
	$('#file-input1', y).attr('id','file-input'+incID);
	$('label', y).attr('for','file-input'+incID);
	$('.txt1', y).attr('class', 'txt'+incID);
	$('.txt'+incID, y).text('Text'+incID);
 
});
 
console.log(newCloned);
 
//$('.newUps').html(newCloned);
 
 
console.log('#up'+lastID);
 
//newCloned.insertAfter('.origin');
newCloned.insertAfter('#up'+lastID);
 
        return false;
});

Je trouve un problème à ce niveau:

Code :

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

1
2
3
4
5
6
7
8
// je fais loop sur les éléments à change leurs id
 
var newCloned = $(cloned).each(function(x, y){
	//console.log(y);
 
  // we need to attribute new ids for the y
  $('#up1', y).attr('id'+incID);
 $('#file1', y).attr('id','file'+incID);

Tous les IDs se change sauf le premier qui est #up1, reste toujours up1, et ne s'incrémente pas

Voici le résultat de newCloned

Code console :

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

1
2
3
0:div#up1.upImage
children
1:input#file-input2

input#file-input1 a changé vers input#file-input2

Merci à vous

[Toufik83]

bonjour,
comme ça?

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
 
var incID = 1;
 $('body').on('click', '.newUp', function() {
 
   var cloned = $('.origin:first').clone(true);
   $(".origin")
     .eq(incID - 1)
     .after(cloned);
 
   cloned.find(".upImage").attr("id", "up" + parseInt(incID + 1))
     .find("input:file").attr("id", "file-input" + parseInt(incID + 1))
     .parent().find("img").attr("id", "file" + parseInt(incID + 1))
     .parents(".upImage").find(".txt1").text("Text " + parseInt(incID + 1));
   incID++;
   console.log(" cloned eq :" + cloned.index());
   return false;
 });

[Fredy007]

L'astuce est eq(), je l'ai pris en consideration et mettre le compte sur les div.origin
DEMO

Code final:

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
19
20
21
22
23
24
25
26
27
28
29
30
31
 
 
var incID = 1;
 
 $('body').on('click', '.newUp', function() {
 
 
   var cloned = $('.origin:first').clone(true);
 
   // count how many div
   var cDiv = $('.origin').length;
   //console.log(cDiv);
 
   $('.origin').eq(cDiv-1).after(cloned);
 
   incID++;
 
   cloned.closest('#origin1').attr('id', 'origin'+incID);
   cloned.find('#up1').attr('id', 'up'+incID);
   cloned.find('label').attr('for', 'file-input'+incID);
   cloned.find('#file1').attr('id', 'file'+incID);
   cloned.find('#file-input1').attr('id', 'file-input'+incID);
   cloned.find('.upInfo').text('Info'+incID);
 
   console.log(cloned);
 
 
 
   return false;
 
    });

[Toufik83]

les lignes (18 jusqu'à 23) de ton code peuvent brièvement devenir comme ça

Code :

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

1
2
3
4
5
6
7
 
 cloned.closest('#origin1').attr('id', 'origin' + incID)
     .find('#up1').attr('id', 'up' + incID)
     .find('label').attr('for', 'file-input' + incID)
     .find('#file1').attr('id', 'file' + incID)
     .parents('.upImage').find('#file-input1').attr('id', 'file-input' + incID)
     .parents('.origin').find('.upInfo').text('Info' + incID);

[Fredy007]

Effectivement, je les ai mis ligne par ligne afin de tester le résultat de chacune

Merci a vous