11
votes

Créer dynamique div avec des identifiants uniques - jQuery

Faites-moi savoir si je n'explique pas assez bien que je me confonds que je pense à y penser.

Je devais pouvoir cliquer sur un bouton indiquant "Ajouter un produit" et créer une divigne unique à chaque fois. Par exemple, le premier div aurait le numéro d'identifiant1, puis # produit2, etc.

La partie vraiment délicate consiste à avoir deux champs de saisie dans la DIV, les deux entrées de texte régulières. Celles-ci doivent également avoir des identifiants uniques afin que je puisse utiliser ce qui est placé en eux.

Faites-moi savoir si vous avez des solutions. Merci, Carson


2 commentaires

De quoi utilisez-vous ces identifiants dynamiques?


Chaque div aura des champs de saisie de texte uniques, qui seront ensuite utilisés pour générer des informations telles que des titres, des produits et des informations de contact vers un PDF. Je suppose que l'id n'a pas d'importance, mais je peux utiliser le même processus pour générer des noms uniques.


6 Réponses :


19
votes

Vous pouvez simplement utiliser une variable d'identification d'incrémentation, comme ceci: xxx

Vous pouvez essayer ici d'essayer ici , c'est une réponse très générale, mais vous obtenez l'idée, juste incrémenter la variable après avoir ajouté vos articles à chaque fois.


6 commentaires

Ps je suis évidemment nouveau ici alors comment faites-vous du code ressemble au code hahaha


Bon cela fonctionne, genre de. Je n'arrive pas à appliquer les noms de classe ou d'identification à la DIV créée. J'ai copié le code expressément aussi. J'ai vu quelque part ailleurs que quelqu'un a utilisé la noille de classe: "aléatoire" plutôt que "classe" mais n'a ni travaillé. Des idées?


@Carson - J'ai donné la démo un peu de coiffage pour la classe ici: jsfiddle.net/nick_craver/tthdq / 12 Il suffit de remplacer wrapper dans mon code ci-dessus avec la classe ou les classes que vous voulez que Div ait :)


Je ne pouvais toujours pas avoir cela fonctionnant, mais j'ai trouvé une solution de contournement pour ceux d'entre vous dans le même bateau. Ce qui suit ajoute une classe et une pièce d'identité à chaque div créé: $ ('<

').addclass('product').attr('id', 'produit' + i)


Merci pour la solution, j'essaie d'utiliser cet inconduction avec l'ajout d'un style de classe Onmouseover et Onmceout, cela fonctionne dans Firefox, mais est incapable de travailler dans IE et Google, sauriez-vous comment le faire? Voici le code que j'ai utilisé "Code" jQuery ("

", {"Classe": "Wrapper", ID: "Produit" + i, "Onmouseover": "JavaScript:" Ceci. ID); "," Onmceout ":" JavaScript: Lowlight (this.id); "}) .append (jQuery (" ", {Type:" Texte ", ID:" Nom "+ i}))) ...... 'Code'


@RAV - mon hypothèse serait est un élément de fermeture automatique ou non récolté, c'est-à-dire peut le rejeter. En outre, n'utilisez pas de cordes, utilisez simplement quelque chose comme Onmouseover: surligner surligneur est votre fonction et utilisez simplement this.id à l'intérieur de celui-ci ... Etant donné que Ceci se référera au

c'est arrivé.



1
votes

Généralement, vous n'avez pas besoin d'utiliser des identifiants de cette manière.

Une fois que vous avez créé le nouvel élément à l'aide de JavaScript, vous avez déjà un objet que vous pouvez transmettre, dans des fonctions, etc. Vous n'avez certainement pas besoin de passer l'identifiant autour de pour que vous puissiez le transmettre dans document.getElementyID ()


2 commentaires

Il est probablement soumettant les valeurs à un serveur cependant :) Donc, généralement, vous avez besoin d'une pièce d'identité ou d'un nom :)


Les identifiants ne font rien avec des soumissions de formulaire, mais vous avez raison pour qu'un nom devra être généré si c'est le cas



3
votes
$(function(){
    var pcount = icount = 0;

    $('<div/>', {
       id:   'product' + pcount++
    }).append($('<input/>', {
       id:   'input' + icount++
    })).append($('<input/>', {
       id:   'input' + icount++
    })).appendTo(document.body);
});

0 commentaires

7
votes

OK. C'est un post vraiment ancien, mais je pensais que cela pourrait aider si vous avez un problème similaire. Je suis tombé sur le .unique () en jquery ( voir ici ).

Il vérifie si le L'élément a déjà un identifiant ou non et si ce n'est pas le cas, il attribue une pièce d'identité unique. L'inconvénient est que vous ne pouvez pas avoir de «nom d'identification personnalisé» à celui-ci (tel que produit_1, produit_2, etc.). L'ID attribué est quelque chose comme Ui-ID-1, UI-ID-2, etc.

pour attribuer un identifiant unique, vous pouvez ainsi faire quelque chose comme ça - xxx

Assurez-vous de ne pas avoir d'identifiant sur l'élément déjà.


2 commentaires

Une note, cette méthode est disponible à partir de JQuery 1.9


Merci d'avoir montré une manière différente mais intéressante.



0
votes

J'utilise celui-ci que j'ai fait

$.fn.uniqueId = function(idlength){
    var charstoformid = '_0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz'.split('');
    if (! idlength) idlength = 10;

    var getId = function() {
        var uniqid = '';
        for (var i = 0; i < idlength; i++) {
            uniqid += charstoformid[Math.floor(Math.random() * charstoformid.length)];
        }
        return uniqid;
    }

    return $(this).each(function(){
        var id = getId()

        while ( $("#"+id).length ) {
            id = getId();
        }
        $(this).attr("id", id);         
    });
}


0 commentaires

0
votes

Vous pouvez utiliser simplement augmenter la variable et ajouter pour créer un code d'identité divisé unique comme ci-dessous

var x = 1;
var wrapper = $('.field_wrapper'); //Input field wrapper your div Add in this Class


var fieldtext = '<div ID="product_'+x+'"><label id="label_'+x+'" for="field_'+x+'"></label><input type="text" id="field_'+x+'" name="field_'+x+'" value=""/></div>'; //New input field html 

$(wrapper).append(fieldtext); // Add field html
x++;


0 commentaires