2009-01-22 5 views
9

Y a-t-il une méthode intégrée ou un plugin defacto par défaut qui vous permettra d'assigner automatiquement un identifiant unique à un élément de jQuery, ou avez-vous besoin de mettre en œuvre quelque chose comme ça? Je cherche le jQuery équivalent à Prototype's identify methodEst-ce que jQuery a un équivalent à Element.identify de Prototype?

Voici un exemple. J'ai une certaine structure HTML sur une page qui ressemble à ceci

<span id="prefix_1">foo bar</span> 
... 
<div id="foo"> 
    <span></span> 
    <span></span> 
    <span></span> 
</div> 

Je veux assigner chacune des travées d'un ID qui sera unique à la page. Donc, après avoir appelé quelque chose comme ça

$('#foo span').identify('prefix'); //fake code, no such method 

Le rendu DOM ressemblerait à quelque chose comme ça

<span id="prefix_1">foo bar</span> 
... 
<div id="foo"> 
    <span id="prefix_2"></span> 
    <span id="prefix_3"></span> 
    <span id="prefix_4"></span> 
</div> 

Y at-il officiel-ish/robuste pour jQuery, ou est-ce quelque chose la plupart des développeurs jQuery roulent sur leur propre ?

+2

Je n'ai jamais eu besoin de quelque chose comme ça ... Comment l'utiliseriez-vous? Gardez à l'esprit: jQuery fonctionne avec des ensembles d'éléments, tandis que Prototype fonctionne avec des éléments individuels - il vaut mieux ajuster votre logique pour s'adapter à ce modèle. – Shog9

+0

C'est un très bon point; J'ai passé les 6 derniers mois avec le prototype. J'avais initialement écrit un widget/plugin jQuery qui fonctionnait sur un élément d'une seule page, en utilisant le #id pour les gestionnaires de branchement. J'ai pensé que le moyen le plus simple d'étendre mon code pour fonctionner sur un ensemble serait une fonction d'identification.Clairement erroné –

+0

Laissez votre commentaire dans une réponse si vous vous souciez toujours de rep de l'autre côté de 10k. –

Répondre

22
jQuery.fn.identify = function(prefix) { 
    var i = 0; 
    return this.each(function() { 
     if(this.id) return; 
     do { 
      i++; 
      var id = prefix + '_' + i; 
     } while($('#' + id).length > 0);    
     $(this).attr('id', id);    
    }); 
}; 

$('span').identify('test'); 

testé ce sur:

<span id='test_2'></span> 
<span>test1</span> 
<span>test2</span> 
<span>test3</span> 

Tourné à:

<span id="test_2"></span> 
<span id="test_1">test1</span> 
<span id="test_3">test2</span> 
<span id="test_4">test3</span> 
+1

Le code fonctionne et est apprécié, mais je suis toujours à la recherche de quelque chose qui a fait son temps et qui a fait ses preuves dans la nature (ce qui n'est en aucun cas une critique sur votre code fourni) –

+0

J'ai tapoté le site jQuery avant d'écrire et je n'ai rien trouvé, mais je comprends d'où tu viens. Je pense que j'ai couvert tout, cependant. –

+0

Bien fait Paolo. – Prestaul

3

Pas que je sache, mais vous pouvez le faire vous-même en ajoutant l'attribut id et en fournissant un GUID.

Pour ajouter l'attribut:

$(foo).attr("id", createGuid()); 

Pour la mise en œuvre createGuid(), see this question.

Notez que vous pouvez facilement transformer ceci en jQuery plug-in afin que cette fonction (vous pouvez même l'appeler identify()) est disponible sur n'importe quelle expression $-.

+0

Oui, ce n'est pas un concept trop difficile à mettre en œuvre. Une autre approche consisterait à stocker un nombre de références sur la fonction plugin et à l'incrémenter à chaque appel. J'espérais avoir quelque chose de plus officiel qui capterait les cas limites auxquels je n'avais pas pensé. –

+0

Compris et d'accord pour obtenir une méthode plus "native"! Je m'intéresse à une meilleure réponse aussi ... –

+0

(L'info/code est apprécié, et vaut un vote, au cas où ce n'était pas évident) –

-1

Peut-être essayer

$("#foo span").each(function(){ 
    $(this).attr("id", "prefix_" + $(this).parent().index($(this))); 
}); 
+0

Ceux-ci ne seront pas globalement uniques, ce que vous voulez généralement dans un ID. –

2

Sur la base de la solution de Paolo:

jQuery.fn.identify = function(prefix) { 
    var i = 0; 
    return this.each(function() { 
     if($(this).attr('id')) return; 
     do { 
      i++; 
      var id = prefix + '_' + i; 
     } while($('#' + id).length > 0);    
     $(this).attr('id', id);    
    }); 
}; 

$('span').identify('test'); 

Une petite modification qui évitera de recomposer les identifiants déjà utilisés.

+0

C'est comme ça que je l'avais à l'origine, mais s'il n'y a qu'un élément nommé 'test_2', il passera directement à 'test_3' sans jamais faire 'test_1' - je ne suis pas sûr que ce soit désiré ou non. –

+0

Oui, c'est à cause de l'argument "i" dans l'appel "each". Je l'ai supprimé pour éviter ce problème. – gizmo

+0

Yup. Arrivé à cela aussi. –

1

je aimerais modifier la fonction donnée un peu et de le rendre:

jQuery.fn.identify = function(prefix) { 
    var i = 0; 
    return this.each(function() { 
     if($(this).attr('id')) return; 
     do { 
      i++; 
      var id = prefix + '_' + i; 
     } while(document.getElementById(id) != null);    
     $(this).attr('id', id);    
    }); 
}; 

ID de pourrait contenir des caractères spéciaux qui nécessiterait un échappement afin de fonctionner correctement avec le moteur de sélecteur CSS jQuery - comme « ». Ainsi, au lieu de les trouver et de leur échapper, il est plus simple et plus rapide de le remplacer par la méthode document.

Questions connexes