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

Благодарим за любую помощь заранее.

Aaron

Answer 1

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

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

Answer 2

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

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, есть намного больше кода, гораздо больше, чем я препарата в это, так что я хотел, чтобы часть я висел на краток. Еще раз спасибо за ввод.

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