Je développe un composant qui fonctionnera sur des sites étrangers. Comment savoir si un identifiant spécifique apparaît plusieurs fois sur la page? J'ai besoin de le savoir pour m'assurer qu'un élément qui m'est fourni "de l'extérieur" est unique en ce sens.

J'ai essayé d'identifier cela en utilisant à la fois document.getElementById et document.querySelector, mais les deux semblent renvoyer le premier élément avec l'ID non unique, plutôt que les deux. jQuery et Sizzle n'ont pas aidé non plus, car ils utilisent ces mêmes méthodes.

2
Che Kofif 28 nov. 2011 à 17:09

7 réponses

Meilleure réponse

En utilisant jQuery, vous pouvez utiliser un sélecteur d'attribut plutôt que le sélecteur d'id:

$("[id='someId']")

Qui devrait retourner tous les éléments avec cet ID


Exemple de travail: http://jsfiddle.net/hunter/VvX7r/

4
hunter 28 nov. 2011 à 13:31

Les identifiants sont censés être uniques, vous ne trouverez donc pas beaucoup d'outils qui vous y aideront.

Avez-vous essayé d'itérer récursivement sur chaque élément du DOM et de vérifier l'identifiant?

0
Tom van der Woerdt 28 nov. 2011 à 13:13

Notez que querySelector ne renverra que la première correspondance. Essayez querySelectorAll:

document.querySelectorAll('#id');
0
user123444555621 28 nov. 2011 à 14:19

Au lieu d'interroger la page entière d'éléments, vous pouvez également faire comme:

function isUniqueId( selector ) {
var elm = $(selector).get(0),
    prevId = elm.id,
    isUnique;

elm.id = "temp"+(+new Date);

isUnique = !$(selector).length;

    if( prevId ) {
    elm.id = prevId;
    }


return isUnique;
}

Si vous le joignez à la page de quelqu'un, les performances devraient être un problème.

1
Esailija 28 nov. 2011 à 13:39
    var id =  "test1",
    elems = [];

 while ( d = document.getElementById(id) ) {
    elems.push( d );
    d.removeAttribute("id")
}

for ( i in elems ) {
    elems[i].setAttribute("id",id);
}

console.log (elems);

Mais setAttribute et removeAttribute ne sont pas croisés. La manière la plus simple est d'utiliser le sélecteur jQuery par les attributs [] comme dans la réponse de hunter

0
Larry Cinnabar 28 nov. 2011 à 13:33

J'ai reçu cet extrait de code SO il y a quelque temps, je ne me souviens plus où? Il est destiné à être utilisé avec FF firebug console. vous pourrez peut-être l'adapter.

(function () {
var elms = document.getElementsByTagName("*"), i, len, ids = {}, id;
for (i = 0, len = elms.length; i < len; i += 1) {
    id = elms[i].id || null;
    if (id) {
        ids[id] =  ids.hasOwnProperty(id) ? ids[id] +=1 : 0;
    }
}
for (id in ids) {
    if (ids.hasOwnProperty(id)) {
        if (ids[id]) {
            console.warn("Multiple IDs #" + id);
        }
    }
}
}());
0
david 28 nov. 2011 à 13:20

Je ne peux pas dire pour Sizzle, mais parce que Jquery utilise des sélecteurs CSS dans ses méthodes pour renvoyer des objets Dom. De par sa nature, l'identifiant d'un élément doit être unique. Donc, dans cette implémentation, JQuery a raison de ne renvoyer que le premier résultat qu'il trouve, car il ne devrait y en avoir qu'un.

Cependant, je vois votre dilemme en ce sens que vous ne pouvez pas contrôler ce qui est mis dans votre page à partir de sources externes.

Dans ce cas, à moins d'analyser chaque élément HTML pour vérifier les doublons, je ne vois aucune autre option.

0
Chris 28 nov. 2011 à 13:15
8296250