создать уникальный идентификатор с помощью javascript

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

UPDATE: вот часть формы для выбора городов. Также обратите внимание, что я использую некоторые php для заполнения городов, когда выбрано определенное состояние.

cali arizona texas

Вот javascript:

 $("#bt").click(function() { $("#form").append( "  cali arizona texas  
" ); });

не могли бы вы просто сохранить индекс работы?

 var _selectIndex = 0; ...code... var newSelectBox = document.createElement("select"); newSelectBox.setAttribute("id","select-"+_selectIndex++); 

РЕДАКТИРОВАТЬ

При дальнейшем рассмотрении вы можете предпочесть использовать имена стиля массива для своих избранных …

например

    

то на стороне сервера в php, например:

 $cities = $_POST['city']; //array of option values from selects 

EDIT 2 В ответ на комментарий OP

Динамическое создание параметров с использованием методов DOM можно выполнить следующим образом:

 var newSelectBox = document.createElement("select"); newSelectBox.setAttribute("id","select-"+_selectIndex++); var city = null,city_opt=null; for (var i=0, len=cities.length; i< len; i++) { city = cities[i]; var city_opt = document.createElement("option"); city_opt.setAttribute("value",city); city_opt.appendChild(document.createTextNode(city)); newSelectBox.appendChild(city_opt); } document.getElementById("example_element").appendChild(newSelectBox); 

предполагая, что массив cities уже существует

В качестве альтернативы вы можете использовать метод innerHTML .....

 var newSelectBox = document.createElement("select"); newSelectBox.setAttribute("id","select-"+_selectIndex++); document.getElementById("example_element").appendChild(newSelectBox); var city = null,htmlStr=""; for (var i=0, len=cities.length; i< len; i++) { city = cities[i]; htmlStr += " 

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

 var uniq = 'id' + (new Date()).getTime(); 
 var id = "id" + Math.random().toString(16).slice(2) 
 function uniqueid(){ // always start with a letter (for DOM friendlyness) var idstr=String.fromCharCode(Math.floor((Math.random()*25)+65)); do { // between numbers and characters (48 is 0 and 90 is Z (42-48 = 90) var ascicode=Math.floor((Math.random()*42)+48); if (ascicode<58 || ascicode>64){ // exclude all chars between : (58) and @ (64) idstr+=String.fromCharCode(ascicode); } } while (idstr.length<32); return (idstr); } 

Очень короткая функция даст вам уникальный идентификатор:

 var uid = (function(){var id=0;return function(){if(arguments[0]===0)id=0;return id++;}})(); 

alert (uid ());

В ответ на @scott: Когда-то JS идет очень быстро … так …

 var uniqueId = null, getUniqueName = function(prefix) { if (!uniqueId) uniqueId = (new Date()).getTime(); return (prefix || 'id') + (uniqueId++); }; 

введите в ваше пространство имен экземпляр, похожий на следующий

 var myns = {/*.....*/}; myns.uid = new function () { var u = 0; this.toString = function () { return 'myID_' + u++; }; }; console.dir([myns.uid, myns.uid, myns.uid]); 

Я работаю над аналогичной проблемой для OP и обнаружил, что элементы решений из @Guy и @Scott могут быть объединены для создания решения, которое является более солидным IMO. В результате уникальный идентификатор здесь состоит из трех разделов, разделенных символами подчеркивания:

  1. Ведущее письмо;
  2. Временная метка, отображаемая в основании 36;
  3. И последний, случайный раздел.

Это решение должно работать очень хорошо, даже для очень больших наборов:

 function uniqueId () { // desired length of Id var idStrLen = 32; // always start with a letter -- base 36 makes for a nice shortcut var idStr = (Math.floor((Math.random() * 25)) + 10).toString(36) + "_"; // add a timestamp in milliseconds (base 36 again) as the base idStr += (new Date()).getTime().toString(36) + "_"; // similar to above, complete the Id using random, alphanumeric characters do { idStr += (Math.floor((Math.random() * 35))).toString(36); } while (idStr.length < idStrLen); return (idStr); } 

Чтобы избежать создания каких-либо счетчиков и убедитесь, что идентификатор уникален, даже если есть некоторые другие компоненты, которые создают элементы с идентификаторами на странице, вы можете использовать случайное число и исправить его, если оно недостаточно. (Но вы также должны немедленно установите идентификатор, чтобы избежать конфликтов):

 var id = "item"+(new Date()).getMilliseconds()+Math.floor(Math.random()*1000); // or use any random number generator // whatever prefix can be used instead of "item" while(document.getElementById(id)) id += 1; //# set id right here so that no element can get that id between the check and setting it в var id = "item"+(new Date()).getMilliseconds()+Math.floor(Math.random()*1000); // or use any random number generator // whatever prefix can be used instead of "item" while(document.getElementById(id)) id += 1; //# set id right here so that no element can get that id between the check and setting it 

Как и другие, вы можете использовать индексируемый индекс, или если вам не нравится идея использования переменной, просто вытащите идентификатор последнего города в списке и добавьте 1 к его идентификатору.

Ниже приведена функция (функция genID () ниже), которая рекурсивно проверяет DOM на уникальность, основанную на любом запрошенном id prefex / ID.

В вашем случае вы могли бы использовать его как таковой

 var seedNum = 1; newSelectBox.setAttribute("id",genID('state-',seedNum)); function genID(myKey, seedNum){ var key = myKey + seedNum; if (document.getElementById(key) != null){ return genID(myKey, ++seedNum); } else{ return key; } } 

Вы можете сгенерировать идентификатор с помощью таймера и избежать дублирования с использованием функции performance.now() :

 id = 'id' + performance.now() dup = 'id' + performance.now() console.log(id) console.log(id.replace('.','')) // sexy id console.log(id === dup) // false! 
 .as-console-wrapper{border-top: none !important;overflow-y: auto !important;top: 0;} 

Вот мой собственный подход к нему на основе xpath созданного элемента:

 /** Returns the XPATH of an element **/ var getPathTo = function(element) { if (element===document.body) return element.tagName; var ix= 0; var siblings= element.parentNode.childNodes; for (var i= 0; i 

Сначала выбирается xpath элемента.

Затем вычисляется hash-код xpath. Поэтому у нас есть уникальный идентификатор на xpath.

Проблема здесь в том, что xpath не обязательно уникальны, если уникальные элементы генерируются «на лету». Таким образом, мы добавляем метку времени в конце.

Возможно, мы могли бы также гарантировать более уникальные элементы, добавив окончательный Math.Random ().

Вы можете воспользоваться closure .

 var i = 0; function generateId() { return i++; } 

Если вы хотите заключить его:

 function generator() { var i = 0; return function() { return i++; }; } var generateId = generator(); generateId(); //1 generateId(); //2 

generator может принять префикс по умолчанию; generateId coud принимает необязательный суффикс:

 function generator(prefix) { var i = 0; return function(suffix) { return prefix + (i++) + (suffix || ''); }; } var generateId = generator('_'); generateId('_'); //_1_ generateId('@'); //_2@ 

Это полезно, если вы хотите, чтобы ваш идентификатор указывал последовательность, очень похожую на new Date().getTime() , но ее легче читать.

Я использую следующую функцию:

 function (baseId) { return baseId + '-' + Math.random().toString(16).slice(2); } 

В параметре baseId я указываю, что префикс для id легче идентифицировать элементы.

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

Вы можете использовать уникальный идентификатор uniqueId (документация здесь ). Это не хороший уникальный уникальный генератор, скажем, записи db или вещи, которые будут сохраняться в браузере или что-то в этом роде. Но причина, по которой я пришел сюда, искала это, была решена, используя ее. Если вам нужен уникальный идентификатор для чего-то достаточно преходящего, это будет сделано.

Мне это нужно, потому что я создавал повторно используемый компонент реакции, в котором есть метка и элемент управления формой. Метка должна иметь атрибут for="controlId" , соответствующий id="controlId" который имеет фактический элемент управления формой (элемент ввода или выбора). Этот идентификатор не нужен из этого контекста, но мне нужно создать один идентификатор для совместного использования обоих атрибутов и убедиться, что этот идентификатор уникален в контексте отображаемой страницы. Таким образом, функция lodash работала отлично. На всякий случай полезно кому-то другому.