Générateur d'ID unique : kGeneratorID
par
, 08/07/2016 à 11h03 (1840 Affichages)
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>