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

});

Answer 2

真是好东西，谢谢大家！最后它看起来像：

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，还有很多代码，比我投入的代码要多得多，所以我想简短地保留我所挂起的部分。再次感谢您的意见。

问候，
亚伦

Answer 3

我认为您正在寻找的是包装。下面将用 span 包装 id 中包含 test 的每个元素。

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

请注意，您可以使用现有的 id 来使用父选择器来匹配跨度，因此实际上不需要复制它或生成一个。

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

如果您确实想使用 id 创建新元素，则可以使用每个元素的一些独特的命名方案。

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