danielhagnoul

Code du générateur d'ID

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/*
 * Générateur d'ID unique
 *
 * str : le nom des ID
 * n : le nombre d'ID
 */
const kGeneratorID = function*( str = 'node', n = 1 ){
  let
    i = 0,
    j = 0,
    r = '',
    nb = 0,
    d = ( new Date() ).valueOf();
 
  while( j < n ){
    r = str + d + i++,
    nb = document.querySelectorAll( "#" + r ).length;
 
    if ( nb === 0 ) {
      j++;
      yield r;
    }
  }
}

Utilisation du générateur sur une série de divisions

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div>Un</div>
<div>Deux</div>
<div>Trois</div>
<div>Quatre</div>

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{
  /*
   * divs : les éléments du DOM
   * gen : le générateur
   * it : l'itérateur
   */
  let
    divs = document.querySelectorAll( "div" ),
    gen = kGeneratorID( 'div', divs.length ),
    it = gen.next();
 
  for ( let item of Array.from( divs ) ){
    if ( ! it.done ){
      item.id = it.value;
      it = gen.next();
    }
  }
}

Résultat :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div id="div14679683434990">Un</div>
<div id="div14679683434991">Deux</div>
<div id="div14679683434992">Trois</div>
<div id="div14679683434993">Quatre</div>

Utilisation du générateur sur un clone

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
  /*
   * Créer un clone et changer son ID
   *
   * L'ID du node cloné est placé dans
   * l'attribut data-origine-id.
   */
  let
    divs = document.querySelectorAll( "div" ),
    elem = divs[ 2 ],
    elemClone = elem.cloneNode( true ),
    gen = kGeneratorID( 'div' );
 
  elemClone.dataset.origineId = elemClone.id;
 
  elemClone.id = gen.next().value;
 
  document.body.appendChild( elemClone );
}

Résultat :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div id="div14679683435000" data-origine-id="div14679683434992">Trois</div>