Farklı öğelerdeyse, birden fazla farklı HTML öğesi aynı kimliğe sahip olabilir mi?

Bunun gibi bir senaryo geçerli mi ?:

div#foo
span#foo
a#foo

Hayır.

Öğe kimlikleri tüm belge içinde benzersiz olmalıdır.

Bir şeyin benzersiz olması ya da benzersiz olması ZORUNLU (web tarayıcıları tarafından zorunlu kılınması) arasında bir fark olduğunu düşünüyorum.

Kimlikler benzersiz olmalı mı? EVET.

Kimlikler benzersiz olmalı mı? HAYIR, en azından IE ve FireFox birden çok öğenin aynı kimliğe sahip olmasına izin verir.

Birden fazla öğe aynı kimliğe sahip olabilir mi?

Evet - aynı etiket olsalar da olmasalar da, tarayıcılar birden fazla öğe aynı kimliğe sahip olsa bile sayfayı oluşturur.

Geçerli HTML mi?

Hayır. Bu, HTML 5.1 spesifikasyonu itibariyle hala geçerlidir . Ancak, spec de iade etmelidir diyorgetElementById geçersiz bir belge durumunda davranışı tanımsız hale getirerek, belirtilen kimliğe sahip ilk öğeyi.

Bu tür geçersiz HTML'nin sonuçları nelerdir?

Çoğu (hepsi değilse de) tarayıcılar arama yaparken belirli bir kimliğe sahip ilk öğeyi seçti ve yine de seçiyorgetElementById . Öğeleri kimliğe göre bulan çoğu kitaplık bu davranışı devralır. Çoğu (hepsi değilse de) tarayıcılar, kimlik seçiciler tarafından atanan stilleri de uygular (ör.#myid ) belirtilen kimliğe sahip tüm öğelere . Beklediğiniz ve planladığınız şey buysa, istenmeyen sonuç yoktur. Başka bir şey beklerseniz / niyet ederseniz (örneğin, bu kimliğe sahip tüm öğeler için veya stilin yalnızca bir öğeye uygulanması için), beklentileriniz karşılanmaz ve bu beklentilere dayanan herhangi bir özellik başarısız olur.

Bazı javascript kütüphaneleri yok birden elemanlar aynı kimliğe sahip olduğunda (bkz yerine getirilmediği beklentileri wootscootinboogie yorumuna d3.js hakkında)

Sonuç

Standartlara bağlı kalmak en iyisidir, ancak kodunuzun mevcut ortamlarınızda beklendiği gibi çalıştığını biliyorsanız ve bu kimlikler öngörülebilir / sürdürülebilir bir şekilde kullanılıyorsa, bunu yapmamak için sadece 2 pratik neden vardır:

1. Yanılıyorsunuz ve kullanmak kütüphanelerden biri aslında bu şansı önlemek için yaptığı çok çeşitli etmenlere aynı kimliğe sahip olduğunda arıza.
2. Web sitenizin / uygulamanızın kütüphanelerle veya hizmetlerle (veya geliştiricilerle) ileriye dönük uyumluluğunu sürdürmek için, gelecekte karşılaşabileceğiniz, birden fazla öğe aynı kimliğe sahip olduğunda arızalanabilir - bu teknik olarak geçerli olmadığından makul bir olasılıktır HTML.

Güç sizindir!

Öğeler farklı tiplerde olsa bile, bazı ciddi sorunlara neden olabilir ...

Aynı kimliğe sahip 3 düğmeniz olduğunu varsayalım:

<button id="myid" data-mydata="this is button 1">button 1</button>
<button id="myid" data-mydata="this is button 2">button 2</button>
<button id="myid" data-mydata="this is button 3">button 3</button>

Şimdi düğmeler tıklandığında bir jQueryşeyler yapmak için bazı kodlar myidayarladınız:

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

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

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

Ne beklerdiniz? Tıklanan her düğmenin jQuery ile click event handler kurulumunu yürütmesi. Ne yazık ki olmayacak. SADECE 1. düğme tıklama işleyiciyi çağırır. Diğer 2 tıklandığında hiçbir şey yapmaz. Sanki hiç düğme değilmiş gibi!

Yani her zaman farklı atamak IDsiçin HTMLelemanlar. Bu sizi garip şeylere karşı koruyacaktır. :)

<button id="button1" class="mybtn" data-mydata="this is button 1">button 1</button>
<button id="button2" class="mybtn" data-mydata="this is button 2">button 2</button>
<button id="button3" class="mybtn" data-mydata="this is button 3">button 3</button>

Şimdi, düğmelerden herhangi biri tıklatıldığında click olay işleyicisinin çalışmasını istiyorsanız, jQuery kodundaki seçiciyi CSSkendilerine uygulanan sınıfı kullanmak üzere değiştirirseniz mükemmel şekilde çalışır :

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

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

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

Aynı kimliğe sahip iki öğe geçerli değil. Kimlikler benzersizdir, eğer böyle bir şey yapmak istiyorsanız bir sınıf kullanın. Bir alanı sınırlayıcı olarak kullanarak öğelerin birden fazla sınıfı olabileceğini unutmayın:

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

HTML için resmi spesifikasyon, kimlik etiketlerinin benzersiz olması gerektiğini belirtir VE resmi spec de tamamlanabilir hale, eğer (sadece "geçersiz" HTML "hatalar" HTML diye bir şey vardır yani) gerektiğini belirtiyor. Yani, id etiketleri aslında pratikte nasıl çalışır . Hepsi geçersiz , ancak yine de çalışıyor:

Bu:

<div id="unique">One</div>
<div id="unique">Two</div>

Tüm tarayıcılarda iyi işler. Ancak document.getElementById yalnızca bir nesneyi döndürür, dizi değil; id etiketini kullanarak yalnızca ilk div öğesini seçebileceksiniz. İlk div'in kimliğini JavaScript kullanarak değiştirseydiniz, ikinci tanıtıcıya document.getElementById (Chrome, FireFox ve IE11'de test edildi) ile erişilebilir. Div'ı diğer seçim yöntemlerini kullanarak da seçebilirsiniz; bu durumda id özelliği doğru şekilde döndürülür.

Yukarıdaki sorunun, SVG görüntülerinin oluşturulduğu sitelerde potansiyel bir güvenlik açığı açtığını lütfen unutmayın ; SVG'lerin DOM öğeleri içermesine izin verilir ve ayrıca kimlik etiketleri de (yüklenen resimler aracılığıyla komut dosyası DOM yönlendirmelerine izin verir). SVG, değiştirildiği öğeden önce DOM'da konumlandırıldığı sürece, görüntü diğer öğeyle ilgili tüm JavaScript etkinliklerini alır.

Bu konu şu anda bildiğim kadarıyla kimsenin radarında değil, yine de gerçek.

Bu:

<div id="unique" id="unique-also">One</div>

Ayrıca tüm tarayıcılarda iyi sonuç verir. Ancak, document.getElementById ('unique-also') öğesini denediyseniz , yalnızca bu şekilde tanımladığınız ilk kimlik kullanılır; yukarıdaki örnekte, null (Chrome, FireFox ve IE11'de test edilmiştir) döndürülürsünüz .

Bu:

<div id="unique unique-two">Two</div>

Ayrıca, tüm tarayıcılarda iyi sonuç verir, ancak bir boşlukla ayrılabilen sınıf etiketlerinden farklı olarak, id etiketi boşluklara izin verir, bu nedenle yukarıdaki öğenin kimliği aslında "benzersiz benzersiz-iki" dir ve dom'dan "benzersiz" isteyin veya DOM'da başka bir yerde tanımlanmadığı sürece (Chrome, FireFox ve IE11'de test edilmiştir ) izolasyonda "benzersiz-iki" null değerini döndürür.

SLaks yanıtı doğrudur, ancak x / html teknik özelliklerinin tüm kimliklerin (tek) html belgesi içinde benzersiz olması gerektiğini belirttiği ek not olarak . Op'un tam olarak sorduğu şey olmasa da, aynı kimliğin birden fazla sayfada farklı varlıklara eklendiği geçerli durumlar olabilir.

Misal:

(modern tarayıcılara sunulur) makale # main-content { tek yönlü stillendirildi }
(eski biçime sunuldu) div # main-content { başka bir biçime yerleştirilmiş }

Muhtemelen bir antipattern olsa da. Sadece bir ţeytanýn savunucusu olarak ayrýlýyorum.

Değeri ne olursa olsun, Chrome 26.0.1410.65, Firefox 19.0.2 ve Safari 6.0.3'te en azından aynı kimliğe sahip birden fazla öğeniz varsa, jquery seçicileri (en azından) bu kimliğe sahip ilk öğeyi döndürür.

Örneğin

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

ve

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

Test için http://jsfiddle.net/RuysX/ adresine bakın .

W3.org'da HTML5'e özgü HTML doğrulayıcı kullanılarak kimliklerin benzersiz olması gerekir

Aşağıdakileri göz önünde bulundur...

<!DOCTYPE html> 
<html>
    <head>
        <meta charset="UTF-8">
        <title>MyTitle</title> 
    </head>
    <body>
        <div id="x">Barry</div>
        <div id="x">was</div>
        <div id="x">here</div>
    </body>
</html>

doğrulayıcı şu yanıtı verir:

Line 9, Column 14: Duplicate ID x.      <div id="x">was</div>
Warning Line 8, Column 14: The first occurrence of ID x was here.       <div id="x">Barry</div>
Error Line 10, Column 14: Duplicate ID x.       <div id="x">here</div>
Warning Line 8, Column 14: The first occurrence of ID x was here.       <div id="x">Barry</div>

... ancak OP özel olarak belirtti - farklı eleman tipleri hakkında. Bu yüzden aşağıdaki HTML'yi göz önünde bulundurun ...

<!DOCTYPE html> 
<html>
    <head>
        <meta charset="UTF-8">
        <title>MyTitle</title> 
    </head>
    <body>
        <div id="x">barry
            <span id="x">was here</span>
        </div>
    </body>
</html>

... validatörün sonucu ...

Line 9, Column 16: Duplicate ID x.          <span id="x">was here</span>
Warning Line 8, Column 14: The first occurrence of ID x was here.       <div id="x">barry

Sonuç:

Her iki durumda da (aynı öğe türü veya farklı öğe türü), kimlik birden çok kez kullanılıyorsa, geçerli HTML5 olarak kabul edilmez.

İd kullanmak yerine sınıf adını kullanabiliriz. html kimliği benzersiz olmalıdır, ancak sınıflar değildir. sınıf adını kullanarak veri alırken js dosyalarınızdaki kod satırı sayısını azaltabilirsiniz.

$(document).ready(function ()
{
    $(".class_name").click(function ()
    {
        //code
    });
});

Bunu yapamayacağınızı düşünüyorum çünkü Id benzersizdir, bir öğe için kullanmanız gerekir. Sınıfı bu amaçla kullanabilirsiniz

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

var ids = document.getElementById('one');

kimlikleri yalnızca ilk div öğesini içerir. Dolayısıyla, aynı kimliğe sahip birden çok öğe olsa bile, belge nesnesi yalnızca ilk eşleşmeyi döndürür.

Hayır, kimlikler benzersiz olmak zorundadır. Bu amaçla sınıfları kullanabilirsiniz

<div class="a" /><div class="a b" /><span class="a" />

div.a {font: ...;}
/* or just: */
.a {prop: value;}

Sınıfta aynı Roll / Id no'ya sahip birden fazla öğrenci olması mümkün müdür? HTML idözniteliğinde böyle. Onlar için aynı sınıfı kullanabilirsiniz. Örneğin:

<div class="a b c"></div>
<div class="a b c d"></div>

Ve bunun gibi.

Genellikle, bir html sayfasında aynı kimliği birden fazla kullanmamak daha iyidir. Yine de, bir sayfada aynı kimliği birçok kez kullanmak mümkündür. Ancak, aşağıdaki gibi URI / URL'nin bir parçası olarak bir kimlik kullandığınızda:

https://en.wikipedia.org/wiki/FIFA_World_Cup#2015_FIFA_corruption_case

Web sayfasında yalnızca bir (span) öğe için kimlik ('2015_FIFA_corruption_case') kullanılıyorsa:

<span class="mw-headline" id="2015_FIFA_corruption_case">2015 FIFA corruption case</span>

Sorun olmazdı. Aksine, aynı kimlik birden fazla yerde bulunur, tarayıcı karıştırılır.

Evet yapabilirler.

Tüm bu anwers modası geçmiş olup olmadığını bilmiyorum, ama sadece youtube açın ve html incelemek. Önerilen videoları incelemeye çalışın, hepsinin aşağıdaki gibi aynı Kimlik ve tekrarlayan yapıya sahip olduğunu göreceksiniz:

<span id="video-title" class="style-scope ytd-compact-radio-renderer" title="Mix - LARA TACTICAL">