Clonage avec incrémentation d'un attribut

Bonjour

soit une page avec entre autre une succession de balise <li>dans une liste <ul id="#listP"> comme celle-ci:

Code:

---

1 2 3 4 5

<li id="li_1"> <input type="checkbox" name="quifaitquoi_1"> <input type="text" name="txretro_1" value="80"> <input type="text" name="debut_1"> </li>

---

mon but est qu'en cliquant sur un bouton dédié ... j'obtienne une clone "tripoté" qui au final serait comme cela :

Code:

---

1 2 3 4 5

<li id="li_2"> <input type="checkbox" name="quifaitquoi_2"> <input type="text" name="txretro_2" value="80"> <input type="text" name="debut_2"> </li>

---

le nom des balises name et id ont été incrémentées. _1 ---> _2.
en clair ... toutes les balises (name et id) qui se terminent par _1 sont à renommer en _2

je tente ces lignes de codes sans succès :

Code:

---

1 2 3 4 5 6 7

$(document).on('click','#addLi',function(){ // nom du bouton de duplication var clone=$('#li_').clone(); clone.find('[name$="_1"]').each(function(){ // ... JE MERDOUILLE SERIEUX ICI }); clone.appendTo('#listP'); });

---

Si vous aviez la combine ... je suis preneur +++

merci

Salut,

Tout d'abord tu clones mal ton li

Code:

---

var clone=$('#li_').clone();

---

, parce que le id "#li_" n'existe pas, c'est plutôt "#li_1" qui existe, puis après il te faut absolument modifier le id de chaque nouvel li ajouté, sinon tu auras des doublons.

En gros voilà une solution basique (que tu peux développer après...),mais pour qu'elle fonctionne, ajoutes une classe conteneur à ton li initial :

Code:

---

1 2	<li id="li_1" class="conteneur">....</li>

---

Puis le code jQuery :

Code:

---

1 2 3 4 5 6 7 8 9 10 11

$(document).on('click', '#addLi', function() { // nom du bouton de duplication var clone = $('#li_1').clone();//ici li_1 et pas li_ var name, chiffre = $('.conteneur').length+1;//compter le nombre des li.conteneur et ajoute un 1 clone.attr('id', "li_" +chiffre )//modification de l'id de li cloné .children().each(function() { name = $(this).attr('name').substr(0, $(this).attr('name').indexOf('_') + 1);//on récupère seulement la partie qui est avant "_" dans les names $(this).attr('name', name +chiffre );//attribution de nouveau name }); clone.appendTo('#listP'); });

---

merci pour ta proposition
En simplifiant à fond le problème j'ai laissé trainé la scorie de " li_" .... bien vu.

j'ai testé ton code ... mais j'ai

Citation:

---

TypeError: undefined is not an object (evaluating '$(this).attr('name').substr')

---

A supposé que cela ait été OK ... la page html ... comporte en fait 17 champs ( et non 4 comme présentés dans l'exemple ) ayant des noms se terminant tous par " _1" .
ta proposition corrige le id et le name ...
C'est pour cela que je désirerai un code plus générique qui corrige toutes les instances de _1 rencontrées entre la balise <li id="li_1"></li>

Si on veut traiter tout ça correctement, je pense que tu n'es pas obliger d'attribuer des ids aux li conteneur

En ce qui concerne l'erreur que tu as montré, je pense que tu as des éléments qui n'ont pas d'attribut name, comme par exemple des <br>, dans ce cas tu peux préciser le sélecteur dans .children()

Code:

---

1 2 3

.children("[name]") ....

---

J’ai pensé à l’utilisation d’expression régulière pour changer en bloc tous les éléments comportant un Underscore _. Mais mes compétences sont limitées ;-)

Tu peux passer par filter() pour filtrer la collection

Ok pour filter().... mais ´est après que je suis intéressé. J’attend ta proposition avec plaisir

Bonjour,

Citation:

---

Envoyé par french-petzouille

... dans une liste <ul id="#listP"> comme ...

---

Pour commencer, ton ID ne doit pas commencer par un #, tu ne pourras rien en faire.

Est-il utile d'avoir toutes ces IDs, pour moi elles ne servent à rien.
Concernant les NAMEs si les données sont vouées à être transmise au serveur autant utiliser la notation sous forme tableau et les récupérer côté serveur dans une boucle.

Code:

---

1 2	<input type="checkbox" name="quifaitquoi[]"> <input type="text" name="txretro[]" value="80">

---

Ceci étant, il te faut « séquencer » tes actions pour pouvoir mieux t'y retrouver, voici ce que je te propose :
Clonage du premier LI de la liste

Code:

---

1 2 3 4 5 6 7

$("#btn-add").on("click", function() { const $parent = $("#listP"); const $oLIs = $parent.children(); const $clone = $oLIs.eq(0).clone(); $parent.append($clone); renameElements( $parent); // on verra après });

---

sans la fonction de renommage toutes les IDs et NAMEs seront dupliqués là dessus on est bien d'accord.
Il faut donc en fin de clonage appeler la fonction renameElements en lui passant en paramètre le parent justement, la <UL>.

Pour tous les <li> on va récupérer les enfants et les rebaptiser en tenant compte de l'indice dans la liste du parent <li>.
Cela pourrait se traduire en code par ceci :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

function renameElement( jqParent) { // on récupère tous les LI const $oLIs = jqParent.children(); // traitement $oLIs.each(function(ind, elem) { // récup. numéro d'ordre let num = ind + 1; // change l'ID let id = elem.id.split("_"); elem.id = id[0] + "_" + num; // récup. des enfants let $enfants = $(elem).children(); // modification du name $enfants.each(function(ind, elem) { let radical = elem.name.split("_"); elem.name = radical[0] + "_" + num; }); }); }

---

[Edit] ajour const à $oLIs = jqParent.children();

Concernant la suppression il te faudra appeler cette même fonction en fin de suppression, par exemple

Code:

---

1 2 3 4 5 6 7 8 9

// delegation event juste pour montrer !!! $("#listP").on("dblclick", "li", function(ev) { const $parent = $(ev.delegateTarget); const $elem = $(this); if ($parent.children().length > 1) { $elem.remove(); renameElement($parent); } });

---

Voilà j'espère que cela est assez clair, mais je maintiens qu'il n'y a pas besoin d'IDs et que les NAMEs pourraient être plus judicieusement choisis ;)

une proposition donc avec filter

https://jsfiddle.net/9vqhxkbj/

ce qui revient à faire

Code:

---

$liavec_ = $('li[id*="_"]');

---

merci les colistiers

ça avance bien

je pige pas ces "let" 8O:oops:

Code:

---

1 2 3

let num = ind + 1; // change l'ID let id = elem.id.split("_");

---

Salut,

L'instruction let permet de déclarer une variable dont la portée est celle du bloc courant, voir mdn javascript.

Voilà une autre proposition qui consiste à utiliser last, elle gère la suppression aussi.

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

$(document).on('click', '#addLi', function() { // nom du bouton de duplication var clone = $('.conteneur').eq(0).clone(), last=$('#listP .conteneur').length ? $('#listP .conteneur').length==1 ? $('#listP .conteneur').first() : $('#listP .conteneur').last() : clone, name, chiffre = parseInt( last.find('input').eq(0).attr('name') .substr(last.find('input').eq(0).attr("name").indexOf('_')+1) )+1;   clone .children("[name]") .each(function() { name = $(this).attr('name').substr(0, $(this).attr('name').indexOf('_') + 1); $(this).attr('name', name +chiffre );//attribution de nouveau name }); clone.appendTo('#listP'); });

---

Citation:

---

Envoyé par SpaceFrog

une proposition donc avec filter

---

Pas fan de l'utilisation de filter quand il n'y a pas de recherche en profondeur sur le nœud ce qui est le cas ici.
children est plus proche de l'API Dom, il peut également cibler plus précisément des éléments ce qui pourrait donner donc :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

function renameElement( jqParent) { // on récupère tous les LI const $oLIs = jqParent.children(); // traitement $oLIs.each(function(ind, elem) { // récup. numéro d'ordre let num = ind + 1; // change l'ID let id = elem.id.split("_"); elem.id = id[0] + "_" + num; // récup. des enfants let $enfants = $(elem).children("[name*='_']"); // on peut cibler plus précisément // modification du name $enfants.each(function(ind, elem) { let radical = elem.name.split("_"); elem.name = radical[0] + "_" + num; }); }); }

---

oh oh ...merci les colistiers.

j'ai pu adapter vos suggestions et ca ....marche.
Danke schon +++


PS : c'est pas très habituel ... j'en profite pour vous demander si vous avez une réponse à cette question bébête en apparence :

https://www.developpez.net/forums/d2...nt-d-sonnette/ merci

Citation:

---

Envoyé par french-petzouille

j'ai pu adapter vos suggestions et ca ....marche.
Danke schon +++

---

Donc c'est résolu merci de le faire il existe un bouton pour cela ;).

Citation:

---

PS : c'est pas très habituel ... j'en profite pour vous demander si vous avez une réponse à cette question bébête en apparence :

https://www.developpez.net/forums/d2012027/systemes/apple/mac-os-x/equivalent-d-sonnette/ merci

---

Rien à voir avec JavaScript :aie:

rien à voir avec javascript en effet ... a mon que cela puisse se faire avec JS ...