jQuery:为每个匹配的元素提供唯一的 ID

Question

我正在编写一个“内联翻译器”应用程序，与云计算平台一起使用来扩展不支持的语言。其中大部分使用 jQuery 来查找文本值，将其替换为翻译，然后将具有唯一 ID 的 span 标记附加到该元素，以便在应用程序中的其他位置使用。然而，当有多个元素(例如 )具有要翻译的完全相同的值(匹配元素)时，就会出现问题。所讨论的函数中发生的情况是，它将所有匹配的元素放在同一个范围内，从其父标签中取出第二个、第三个、第四个等。我的代码与这个示例非常相似:

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

作为一种解决方法，我尝试使用循环为每个跨度创建一个类，递增直到 jQuery("input[id~=test1]").length，但我似乎无法得到我为工作所做的一切。有没有办法给每个匹配的元素一个唯一的ID？我对 jQuery 的熟练程度正在接受考验!

感谢您提前提供的任何帮助。

亚伦

Answer 1

我的做法是生成一个随机数并将其附加到初始 ID:

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

});