jQuery：给每个匹配的元素一个唯一的ID

Question

我正在编写一个'内联翻译器'应用程序，以便与云计算平台一起使用来扩展不支持的语言。其中大部分使用jQuery来查找文本值，将其替换为翻译，然后将具有唯一ID的跨度标签附加到该元素，以便在应用程序中的其他位置使用。然而，问题出现时，如果有多个元素（比如说，具有完全相同的要翻译的值）（匹配元素）。所讨论的函数中发生的事情是，它将所有匹配的元素放在同一个跨度中，从其父标记中取出第二，第三，第四等。我的代码是非常喜欢这个例子：

<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（“输入[ID〜= TEST1] “）.length，但我似乎无法得到任何工作。有没有办法给每个匹配的元素一个唯一的ID？我在jQuery中的流畅度正在接受测试！

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

Aaron

Answer 1

我想你要找的是换行。以下将使用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>"); 
    }); 
}); 

Answer 2

我采取的是产生一个随机数，并追加到初始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 3

这是好东西，谢谢大家！最后，它的样子：

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，还有很多更多的代码，比我药到这个多得多，所以我想保持我挂了简短的部分。再次感谢您的意见。

Regards， Aaron