создать уникальный идентификатор с помощью JavaScript - PullRequest
45 голосов
/ 12 июля 2010

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

ОБНОВЛЕНИЕ: здесь часть формы для выбора городов. Также обратите внимание, что я использую php для заполнения городов, когда выбрано определенное состояние.

<form id="form" name="form" method="post" action="citySelect.php">
<select id="state" name="state" onchange="getCity()">
    <option></option>
    <option value="1">cali</option>
    <option value="2">arizona</option>
    <option value="3">texas</option>
</select>
<select id="city" name="city" style="width:100px">

</select>

    <br/>
</form>

Вот код JavaScript:

$("#bt").click(function() {

$("#form").append(
       "<select id='state' name='state' onchange='getCity()'>
           <option></option>
           <option value='1'>cali</option>
           <option value='2'>arizona</option>
           <option value='3'>texas</option>
        </select>
        <select id='city' name='city' style='width:100px'></select><br/>"
     );
});

Ответы [ 19 ]

1 голос
/ 20 декабря 2016

Вот функция (функция genID () ниже), которая рекурсивно проверяет DOM на уникальность на основе любого идентификатора предпочтения / идентификатора, который вы хотите.

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

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;
     }
 }
1 голос
/ 12 июля 2010

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

1 голос
/ 17 августа 2017

Вы можете создать идентификатор, используя таймер и избегая дублирования , используя 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;}

Обратите внимание, что API с высоким разрешением времени доступен во всех последних браузерах .

1 голос
/ 22 февраля 2019

Случайное значение не уникально.Значения времени не уникальны.Концепции совершенно разные, и различие проявляется в уродливости, когда ваше приложение масштабируется и распределяется.Многие из приведенных выше ответов потенциально опасны.

Более безопасный подход к вопросу автора - UUID: Создать GUID / UUID в JavaScript?

1 голос
/ 13 декабря 2017

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

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

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

0 голосов
/ 22 апреля 2016

Вот мой собственный взгляд на 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<siblings.length; i++) {
      var sibling= siblings[i];
      if (sibling===element)
          // stripped xpath (parent xpath + tagname + index)
          return getPathTo(element.parentNode)+ element.tagName + ix+1;
      if (sibling.nodeType===1 && sibling.tagName===element.tagName)
          ix++;
   }
}

/** hashcode function (credit http://stackoverflow.com/questions/7616461/generate-a-hash-from-string-in-javascript-jquery **/
var hashCode = function(str) {
  var hash = 0, i, chr, len;
  if (str.length === 0) return hash;
  for (i = 0, len = str.length; i < len; i++) {
    chr   = str.charCodeAt(i);
    hash  = ((hash << 5) - hash) + chr;
    hash |= 0; // Convert to 32bit integer
 }
return hash;
};

/** Genaretes according to xpath + timestamp **/
var generateUID = function(ele)
{
  return hashCode(getPathTo(ele)) + new Date().getTime();
}

Сначала извлекается xpath элемента.

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

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

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

0 голосов
/ 27 января 2017

Вы можете воспользоваться 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 Может принимать дополнительный суффикс:

function generator(prefix) {
  var i = 0;
  return function(suffix) {
    return prefix + (i++) + (suffix || '');
  };
}

var generateId = generator('_');
generateId('_'); //_1_
generateId('@'); //_2@

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

0 голосов
/ 06 сентября 2018

Сочетание случайных чисел и даты в мс должно помочь, почти не изменив коллизии:

function uniqid(){
  return Math.random().toString(16).slice(2)+(new Date()).getTime()+Math.random().toString(16).slice(2);
}
alert(uniqid()+"\r"+uniqid());
0 голосов
/ 15 сентября 2017

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

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...