Bonjour,
Je voudrais cloner un élement et modifier le texte du p de la classe "visuNom"
Le clonage fonctionne bien, mais le nom de visuNom reste "Element 1" au lieu d'afficher "Elément 2", puis "Elément 3" etc.

Le HTML

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
 
 <div id="visu">  
             <div id="element"  name="0" class="element">
                <div id="porteVisuNom" class="porteVisuNom">
                    <p id="visuNom" class="visuNom">Element 1</p>
                </div>   
         </div> 
 
        </div>
        <button id="clone">clone</button>
Le CSS
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
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
 
      #clone{
         position : fixed;
         top:20px;
         left:46%;
         font-size:20px;
         width:9%;  
         z-index:15;
        display:flex;
        flex-direction: row;
        justify-content: center;
         text-align:center;
         padding-right:5px;
          padding-left:5px; 
    }
 
 
         #visu {
             position:fixed;
             top:100px;
            width:90%;   
            z-index;1;
            margin-top:5px;
             height:68%;
            margin-left:6.5%;
            display:flex;
            flex-flow: row wrap;
            align-content:flex-start;
            justify-content:flex-start;  
             // background-color:yellow;
             overflow:scroll;
        }
 
          .element {
              display: flex;
              flex-direction: column;
              justify-content:center;
             //box-shadow: 3px 3px 3px #4d4d4d;
             // border-radius: 10px;
              padding-left:10px;
              padding-right:10px;
              margin-bottom:25px;
              margin-right:20px;
              width:31%;
              z-index:20;
            //  height:50%
 
      } 
 
          .porteVisuNom {
          display: flex;
          flex-direction: column;
          justify-content:center;
          align-items: center;
          background-color: white;
          border: 7px solid limegreen;
          border-radius: 10px;
         // padding-left:5px;
         // padding-right:5px;
        // width:25%;
          height: 170px;
         // margin: 5px 0px;
        margin-bottom:8px;
        //overflow:scroll;
 
      } 
 
      .visuNom {
         font-family:"Helvetica Neue";
         padding-top:8px;  
        padding-bottom:8px;  
         padding-left:10px;
         padding-right:10px;
         color:black;			     
		 line-height:110%;
         text-align:center; 
         font-size:2.5em;  
         // width:260px;
      }
Le code JS
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
 
          var totalElements=0;
 
  $("#clone").click(function(){
      totalElements++;
      $("#element").clone().attr('id','element' +totalElements).appendTo("#visu").hide().fadeIn(2200, 'swing');
      var leNom = "Element" + totalElements
     //je voudrais que le p visuNom affiche la variable leNom
J'ai cherché partout, mais je ne trouve pas la solution.
Merci de votre aide. Je suis vraiment bloqué .