Как добавить уникальные идентификаторы в html-теги

#javascript #asp.net

Вопрос:

У меня есть функция в javascript, которая создает загрузочную карту с 3 текстовыми областями в ней.

 var AddCard = function() {   const card =  ` lt;div class="card aircat-card-border"gt;  lt;div class="card-header bg-info"gt;  lt;h5 style="font-weight: bold"gt;Additional Entrylt;/h5gt;  lt;/divgt;  lt;div id="pnlEntry" class="bg-secondary"gt;  lt;div class="pt-2 form-group"gt;   lt;Label Class="row pl-3" runat="server"gt;Detailed Action:lt;/Labelgt;  lt;textarea style="width: 100%;" class="form-control form-control-sm" id="txtEngrActionDesc2" runat="server" cols="50" rows="2" gt;lt;/textareagt;   lt;Label Class="row pl-3" runat="server" gt;IAW:lt;/Labelgt;  lt;textarea style="width: 100%;" class="form-control form-control-sm" id="txtEngrIAW2"  runat="server" cols="50" rows="2" maxlength="2000"gt;lt;/textareagt;   lt;Label Class="row pl-3" runat="server"gt;Discrepancy Narrative:  lt;Label Class="text-dark small" runat="server"gt;   lt;/Labelgt;(200 Character Limit)lt;/Labelgt;  lt;textarea style="width: 100%;" class="form-control form-control-sm"   id="txtEngrDiscrepNarrative2"  runat="server" cols="50" rows="2" maxlength="200"gt;lt;/textareagt;      lt;Label runat="server"gt;Clcik to save this entry to the alert:lt;/Labelgt;  lt;a id="btnSaveEntry" class="btn btn-success btn-sm "gt;Savelt;/agt;    lt;/divgt;  lt;/divgt;  lt;/divgt; `   const mainDiv = document.getElementById("divEntryPanel");  mainDiv.innerHTML  = card  document.getElementById("divEntryPanel").style.display = "inline";  }  

При создании каждой карты я хочу, чтобы каждая область текста имела уникальные идентификаторы. Я написал функции javascript, которые должны добавлять уникальные идентификаторы к тегам, но они не увенчались успехом. Есть какие-нибудь предложения?

 var AddDetailsFunc = function () {  AddCard();  $.unblockUI();   $.each(function (index, entry) {  CreateEntry(entry.Key,'', '', '');  });  }   var CreateEntry = function (entryId, DA, IAW, DN) {  var txtDA = $(' id="txtEngrActionDesc2'   entryId   '" type="text" maxlength="2000"').addClass('form-control').val(DA);  var txtIAW = $('input id="txtEngrIAW2'   entryId   '" type="text" maxlength="2000"').addClass('form-control').val(IAW);  var txtDN = $('lt;input id="txtEngrDiscrepNarrative2'   entryId   '" type="text" maxlength="200"gt;').addClass('form-control').val(DN);   var idTD = $('lt;tdgt;').addClass('text-center').append(entryId);  var DATD = $('lt;textareagt;').append(txtDA);  var IAWTD = $('lt;textareagt;').append(txtIAW);   var DNTD = $('lt;tdgt;').addClass('text-center').append(txtDN);    textarea.append(idTD).append(DATD).append(IAWTD).append(DNTD);  $('#divEntryPanel').append(textarea);   }  

Комментарии:

1. установите значение атрибута $(tag).attr('attribute_name', value)

2. Какова ценность входа в каждый момент времени?

3. divEntryPanel-это просто div в html-коде, который вызывает карта, поэтому он будет отображаться в определенной области веб-страницы.

Ответ №1:

Поскольку идентификатор является атрибутом тега textarea, он должен выглядеть следующим образом

 var textarea = $('lt;textareagt;'); textarea.attr('id', 'someid'); $('#main').append(textarea);  

Вместо того, чтобы делать это в строковой переменной, создайте xml-узлы. и в цикле вы можете использовать индекс или значение ключа, чтобы сделать его уникальным

 $.each(function (index, entry) {  var textarea = $('lt;textareagt;');  textarea.attr('id', 'name'   index);  //textarea.attr('id', 'name'   entry.key); // incase its unique   $('#main').append(textarea); });  

следует поставить как id=’name1′ для следующего тега id=’name2′

Комментарии:

1. сделает ли это идентификатор уникальным для каждой созданной текстовой области?

2. Я обновил в ответе, сначала попробуйте самый простой пример, а затем добавьте дополнительные вещи пошагово