2

我正在编写一个“内联翻译器”应用程序，与云计算平台一起使用以扩展不受支持的语言。其中大部分使用 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 的流利程度正在接受考验！

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

亚伦

4

3 回答 3

4

我的做法是生成一个随机数并将其附加到初始 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);

});
于 2010-05-23T16:06:46.803 回答
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，有更多的代码，比我投入的更多，所以我想让我挂断的部分保持简短。再次感谢您的输入。

问候，亚伦

于 2010-05-23T16:21:00.267 回答
0

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

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>");
    });
});
于 2010-05-23T15:09:59.490 回答