Discussion :

[french-petzouille]

Bonjour

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

Code HTML :

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

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 HTML :

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

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 :

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

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

[Toufik83]

Salut,

Tout d'abord tu clones mal ton li

Code :

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

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 html :

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

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

Puis le code jQuery :

Code :

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

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

[french-petzouille]

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

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>

[Toufik83]

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 :

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

1
2
3
 
.children("[name]")
....

[french-petzouille]

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

[SpaceFrog]

Tu peux passer par filter() pour filtrer la collection

[french-petzouille]

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

[NoSmoking]

Bonjour,

... 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 html :

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

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 :

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

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 :

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
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 :

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

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

[SpaceFrog]

une proposition donc avec filter

https://jsfiddle.net/9vqhxkbj/

ce qui revient à faire

Code :

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

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

[french-petzouille]

merci les colistiers

ça avance bien

je pige pas ces "let"

Code :

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

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

[Toufik83]

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 :

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
 
$(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');
});

[NoSmoking]

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 :

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

[french-petzouille]

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

[NoSmoking]

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 .

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

[french-petzouille]

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