jQuery: Donner à chaque élément correspondant un ID unique

Question

Je suis en train d'écrire une application de 'traducteur en ligne' à utiliser avec une plate-forme de cloud computing pour étendre des langages non supportés. La majorité utilise jQuery pour trouver la valeur du texte, la remplace par la traduction, puis ajoute l'élément avec une balise span ayant un identifiant unique, à utiliser ailleurs dans l'application. Le problème se pose cependant, lorsqu'il y a plus d'un élément, disons, qui ont exactement la même valeur à traduire (éléments appariés). Ce qui se passe dans la fonction en question est qu'elle place tous les éléments correspondants dans le même intervalle, en prenant les deuxième, troisième, quatrième, etc. Mon code est à peu près comme dans cet exemple:

<script src='jquery-1.4.2.js'></script> 
<script> 
jQuery.noConflict(); 
var uniqueID='asdfjkl'; 
jQuery(window).ready(function() { 
var myQ1 = jQuery("input[id~=test1]"); 
myClone=myQ1.clone(); 
myClone.val('Replaced this button'); 
myQ1.replaceWith('<span id='+uniqueID+'></span>'); 
jQuery('#'+uniqueID).append(myClone); 
}); 
</script> 
<table> 
<tr><td> 
<input id='test1' type='button' value="I'm a button!"></input> &nbsp; 
<input id='test2' type='button' value="And so am I"></input> 
</tr></td> 
<tr><td> 
<input id='test1' type='button' value="I'm a button!"></input> 
</tr></td> 
</table> 

Pour contourner ce problème, je l'ai expérimenté avec l'aide d'une boucle pour créer une classe pour chaque travée, passant par incréments jusqu'à ce que jQuery ("entrée [id = ~ test1] ") .length, mais je n'arrive pas à faire quoi que ce soit que je fasse pour travailler. Est-il possible de donner à chaque élément correspondant un identifiant unique? Ma maîtrise de jQuery est mise à l'épreuve!

Merci pour toute aide à l'avance.

Aaron

Answer 1

Je pense que ce que vous cherchez est wrap. Ce qui suit encapsulera chaque élément contenant test dans l'ID avec un span.

jQuery.noConflict(); 
jQuery(document).ready(function() { 
    jQuery("input[id*=test]").wrap('<span></span>'); 
}); 

Notez que vous pouvez utiliser les ids existants pour correspondre à la durée à l'aide d'un sélecteur de parent donc il n'y a pas vraiment besoin de le dupliquer ou de générer un.

$("input[id*=test]').parent('span')... 

Si vous voulez vraiment créer de nouveaux éléments avec des identifiants, vous pouvez utiliser chacun avec un schéma de nommage unique.

jQuery.noConflict(); 
jQuery(document).ready(function() { 
    jQuery("input[id*=test]").each(function() { 
     var $this = $(this); 
     var id = $this.attr('id'); 
     $this.wrap('<span id="span-' + id + '"></span>"); 
    }); 
}); 

Answer 2

Mon point de vue était de générer un nombre aléatoire et l'ajouter à l'id initial:

jQuery.noConflict(); 
jQuery(window).ready(function() { 

    var myQ1 = jQuery("input[id*='test']"); 
    var uniqueNum = Math.floor(Math.random()*99999); 
    var uniqueID = myQ1.attr('id')+'-'+String(uniqueNum); 

    myClone=myQ1.clone(); 
    myClone.text('Replaced this button'); 

    myQ1.replaceWith('<span id='uniqueID+'></span>'); 

    jQuery('#'+uniqueID).append(myClone); 

}); 

Answer 3

C'est bien ça, merci à tous! A la fin il ressemble:

var myQ1 = jQuery("input[name~=test1]"); 
myQ1.each(function() { 
    var id = Math.floor(Math.random()*99999); 
    jQuery(this).wrap("<span id=\"span-"+id+"\"></span>"); 
... 

Aseptik, il y a beaucoup plus de code, beaucoup plus que je médicament dans ce, alors je voulais garder la partie que je raccroché au nez bref. Merci encore pour la contribution.

Cordialement, Aaron