jQuery: предоставление каждому сопоставленному элементу уникального идентификатора.

Question

Я пишу приложение «встроенный переводчик», которое будет использоваться с платформой облачных вычислений для расширения неподдерживаемых языков.Большинство из них использует jQuery, чтобы найти текстовое значение, заменить его переводом, а затем добавить элемент с тегом 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] "). длина, но я не могу заставить себя работать.Есть ли способ дать каждому сопоставленному элементу уникальный идентификатор?Моя беглость в jQuery проверяется!

Спасибо за любую помощь заранее.

Аарон

Answer 1

Мне нужно было сгенерировать случайное число и добавить его к исходному идентификатору:

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

Асептик, кода гораздо больше, гораздо больше, чем я употребляю, поэтому я хотел, чтобы часть, которую я зациклил, была короткой. Еще раз спасибо за ввод.

С уважением, Аарон

Answer 3

Я думаю, что вы ищете, это упаковка. Следующее обернет каждый элемент, содержащий test в идентификаторе с span.

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

Обратите внимание, что вы можете использовать существующие идентификаторы для соответствия диапазону, используя родительский селектор, поэтому на самом деле нет необходимости дублировать его или генерировать.

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

Если вы действительно хотите создавать новые элементы с идентификаторами, вы можете использовать каждый из них с какой-то уникальной схемой именования.

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