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

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

3 个答案: