Plusieurs éléments HTML différents peuvent-ils avoir le même ID s'ils sont de types différents?

Question

Un tel scénario est-il possible ?:

 div#sexy
span#sexy
a#sexy
 

...

J'en ai besoin pour un script que j'écris et je voulais qu'il soit joli.

Answer 1

Non.

Les ID d'élément doivent être uniques dans tout le document.

Answer 2

Je pense qu'il y a une différence entre si quelque chose DEVRAIT être unique ou DOIT être unique (c'est-à-dire imposé par les navigateurs Web).

Les identifiants devraient-ils être uniques? OUI.

Les identifiants doivent-ils être uniques? NON, au moins IE et FireFox permettent à plusieurs éléments d'avoir le même ID.

Answer 3

Même si les éléments sont de différents types, il peut vous causer de sérieux problèmes...

Supposons que vous avez 3 liens avec le même id:

<a id="myid" href="#" data-mydata="this is link 1">Link 1</a>
<a id="myid" href="#" data-mydata="this is link 2">Link 2</a>
<a id="myid" href="#" data-mydata="this is link 3">Link 3</a>

Maintenant, vous mise en place de quelques jQuery code pour faire quelque chose lorsqu' myid liens sont cliqués:

$(document).ready(function ()
{
    $("#myid").click(function ()
    {
        var linkData = $(this).data("mydata");

        // Call interesting function...
        interestingFunction();

        $('form').trigger('submit');
    });
});

Qu'attendez-vous? Que chaque lien cliqué sur exécuter le gestionnaire d'événements click installation avec jQuery. Malheureusement, cela n'arrivera pas. SEUL le 1er lien appelle le gestionnaire de clic. Les 2 autres quand on clique ne rien faire. C'est comme si ils n'étaient pas des liens à tous!

Il faut donc toujours attribuer différents IDs de HTML - éléments. Cela vous aidera à couvert contre des choses étranges. :)

<a id="link1" class="mylink" href="#" data-mydata="this is link 1">Link 1</a>
<a id="link2" class="mylink" href="#" data-mydata="this is link 2">Link 2</a>
<a id="link3" class="mylink" href="#" data-mydata="this is link 3">Link 3</a>

Maintenant, si vous voulez que le gestionnaire d'événements click pour exécuter lorsque l'un des liens cliquez dessus, il fonctionne parfaitement, si vous modifiez le sélecteur dans le jQuery, le code à utiliser l' CSS classe appliquée à eux comme ceci:

$(document).ready(function ()
{
    $(".mylink").click(function ()
    {
        var linkData = $(this).data("mydata");

        // Call interesting function...
        interstingFunction();

        $('form').trigger('submit');
    });
});

Answer 4

Non, deux éléments avec le même identifiant ne sont pas valides. Les identifiants sont uniques, si vous souhaitez faire quelque chose comme ça, utilisez une classe. N'oubliez pas que les éléments peuvent avoir plusieurs classes en utilisant un espace comme séparateur:

 <div class="myclass sexy"></div>
 

Answer 5

Et pour ce que cela vaut, sur Chrome 26.0.1410.65, Firefox 19.0.2 et Safari 6.0.3 au moins, si vous avez plusieurs éléments avec le même ID, les sélecteurs jQuery renverront (au moins) le premier élément avec cet ID.

par exemple

 <div id="one">first text for one</div>
<div id="one">second text for one</div>
 

et

 alert($('#one').size());
 

Voir http://jsfiddle.net/RuysX/ pour un test.