यदि अलग-अलग तत्व हैं तो क्या कई अलग-अलग एचटीएमएल तत्वों की एक ही आईडी हो सकती है?

Question

क्या इस तरह का परिदृश्य मान्य है? "

div#foo
span#foo
a#foo

Comments

जबकि कभी-कभी संभव है, यह कभी भी मान्य नहीं है।

— पॉल क्रीज

उपरोक्त सभी के साथ यह कहा जा सकता है कि यह ध्यान देने योग्य है कि यह उपयोगकर्ता-एजेंट-निर्मित सामग्री (सोचें चौखटे, एमवी *, प्रतिक्रिया, बहुलक ...) के साथ एक ही आईडी में कई आईडी आने की संभावना है। अगर कोई सोच रहा था कि एक बहुत ही पेशेवर दिखने वाली XYZ साइट इस तरह के बुरे अभ्यास से क्यों भरी हुई है ।

— लुकाज़ मैटिसियाक

Answer 1

नहीं।

पूरे दस्तावेज के भीतर एलिमेंट आईडी अद्वितीय होनी चाहिए।

Comments

ऐसा न करने के परिणाम क्या हैं?

— corsiKa

@corsiKa परिणाम अपरिभाषित व्यवहार है, उदाहरण के लिए, क्या दस्तावेज़ है। आप जेएस से इन तत्वों के साथ काम करने में सक्षम होने की समस्याओं में भाग लेंगे, उन्हें पुस्तकालयों / एपीआई / फ्लैश, आदि के चयनकर्ताओं के रूप में पास करें

— मैरोनी

यह गलत है। एक ही आईडी के साथ कई तत्वों का होना पूरी तरह से संभव है। यह आमतौर पर सबसे अच्छा अभ्यास नहीं है , लेकिन इसके सामयिक उपयोग हैं। सभी का हवाला है कि चयनकर्ता कैसे काम करते हैं, यह जानने के लिए कि क्या आपके जाने में आपके पास परस्पर विरोधी आईडी होंगे, आप अपने चयनकर्ताओं का उपयोग माता-पिता के साथ करते हैं, जहां माता-पिता के तहत आईडी अद्वितीय होगी। जैसे $('div#car span#size)और $('div#truck span#size')।

— BJury

जब आप इस उद्देश्य के लिए क्लास में आए तब भी कई समान आईडी का उपयोग क्यों करें?

— मैक्स यारी

हां, कई आईडी, व्यवहार में, कक्षाओं का उपयोग करके प्रतिस्थापित की जा सकती हैं। हालांकि, कक्षाएं शैलियों को लागू करने, तत्वों की पहचान न करने, नामों के दायरे को अधिक व्यापक बनाने और इसलिए ओवरलैप होने की संभावना के लिए अभिप्रेत हैं। खासकर अगर 3 पार्टी पुस्तकालयों का उपयोग कर रहे हैं। आईडी को 'पहचानकर्ता' के रूप में गुणा करने का इरादा नहीं है, इसलिए स्पष्ट रूप से बीच में कुछ की आवश्यकता है। व्यावहारिक उपयोग अलग-अलग तार्किक इकाइयों में एक पृष्ठ / डोम के वर्गों का मानकीकरण है। इसलिए (कम से कम) 2-परत पहचान का उपयोग करना आवश्यक है।

— एलन सिल्जाक

Answer 2

मुझे लगता है कि इस बात में अंतर है कि क्या कुछ अनोखा होना चाहिए या जरूरी है कि यह अद्वितीय हो (यानी वेब ब्राउज़र द्वारा लागू किया गया)।

क्या आईडी अद्वितीय होनी चाहिए? हाँ।

आईडी अद्वितीय होनी चाहिए? नहीं, कम से कम IE और फ़ायरफ़ॉक्स कई तत्वों को एक ही आईडी रखने की अनुमति देते हैं।

Comments

तो क्या क्रोम (उस समय v22 यह टिप्पणी लिखी गई थी)। : D

— omninonsense

युक्ति के अनुसार , यह एक आवश्यक नहीं है। (क्या यह अभी भी अधिकांश ब्राउज़रों में काम करता है? हां, क्या यह वैध HTML है? नहीं, इसके अलावा, getElementByIdऐसे मामलों में परिणाम है undefined, जिसका अर्थ है कि यह बताने का कोई तरीका नहीं है कि कोई ब्राउज़र इसे कैसे संभाल सकता है।)

— leo

@ एलो हालांकि यह वास्तविक दुनिया है जहां ब्राउज़र मानकों के अनुरूप नहीं हैं। इस मामले में यह एक अच्छी बात हो सकती है, क्योंकि अद्वितीय आईडी को लागू करने का कोई कारण नहीं है।

— BJury

एचटीएमएल 5 में, getElementByIdवास्तव में के लिए कल्पना परिभाषित करती है कि दिए गए आईडी के साथ पहला तत्व वापस लौटाया जाना चाहिए (जो कि वर्तमान में सभी ब्राउज़र वैसे भी स्थिति को कैसे संभालते हैं) - अधिक के लिए नीचे मेरा जवाब देखें।

— शाम

रोना मत, jQuery का उपयोग करें। @leo

— Máxima Alekz

Answer 3

क्या कई तत्वों में समान आईडी हो सकती है?

हां - वे एक ही टैग हैं या नहीं, ब्राउज़र पृष्ठ को रेंडर करेगा भले ही कई तत्वों में एक ही आईडी हो।

क्या यह मान्य HTML है?

नहीं। यह अभी भी HTML 5.1 कल्पना के रूप में सही है । हालांकि, युक्ति यह भी कहती है कि दिए गए आईडी के साथ पहला तत्व getElementById वापस करना होगा , जिससे अवैध दस्तावेज के मामले में व्यवहार अपरिभाषित न हो।

इस प्रकार के अमान्य HTML के परिणाम क्या हैं?

अधिकांश (यदि सभी नहीं) ब्राउज़रों का चयन किया है और अभी भी है दी गई ID, जब बुला के साथ पहली तत्व का चयन getElementById। अधिकांश पुस्तकालय जो आईडी द्वारा तत्वों को खोजते हैं, उन्हें यह व्यवहार विरासत में मिलता है। अधिकांश (यदि सभी नहीं हैं) ब्राउज़र आईडी-चयनकर्ताओं (जैसे #myid) द्वारा निर्दिष्ट आईडी के साथ सभी तत्वों को निर्दिष्ट शैलियों को भी लागू करते हैं । यदि यह वही है जो आप अपेक्षा करते हैं और इरादा करते हैं, तो कोई अनपेक्षित परिणाम नहीं हैं। यदि आप किसी और चीज़ की उम्मीद / इरादा रखते हैं (जैसे कि उस आईडी वाले सभी तत्वों के लिए, या शैली केवल एक तत्व पर लागू करने के लिए) तो आपकी अपेक्षाएँ पूरी नहीं होंगी और उन उम्मीदों पर निर्भर कोई भी सुविधा विफल हो जाएगी।

कुछ जावास्क्रिप्ट लाइब्रेरियों करते उम्मीदों कि पूरी नहीं की जाती है जब एक से अधिक तत्वों एक ही आईडी है (देखें wootscootinboogie की टिप्पणी d3.js के बारे में)

निष्कर्ष

मानकों से चिपकना सबसे अच्छा है, लेकिन यदि आप जानते हैं कि आपका कोड आपके वर्तमान वातावरण में अपेक्षित रूप से काम करता है, और इन आईडी का उपयोग एक पूर्वानुमान / रखरखाव योग्य तरीके से किया जाता है, तो ऐसा न करने के केवल 2 व्यावहारिक कारण हैं:

1. इस संभावना से बचने के लिए कि आप गलत हैं, और आपके द्वारा उपयोग किए जाने वाले पुस्तकालयों में से एक में कई तत्वों के एक ही आईडी होने पर वास्तव में खराबी होती है।
2. पुस्तकालयों या सेवाओं (या डेवलपर्स!) के साथ आपकी वेबसाइट / एप्लिकेशन के फॉरवर्ड-संगतता को बनाए रखने के लिए, आप भविष्य में मुठभेड़ कर सकते हैं, कि खराबी तब करें जब कई तत्वों में एक ही आईडी हो - जो एक उचित संभावना है क्योंकि यह तकनीकी रूप से मान्य नहीं है। एचटीएमएल।

सत्ता आपकी है!

Comments

बहुत बढ़िया जवाब। यह हमेशा सबसे अच्छा है यदि आप मानकों से चिपके रहते हैं।

— इकाडिली 10

Answer 4

यहां तक ​​कि अगर तत्व विभिन्न प्रकार के हैं, तो यह आपको कुछ गंभीर समस्याएं पैदा कर सकता है ...

मान लें कि आपके पास एक ही आईडी के साथ 3 बटन हैं:

<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>

अब आप बटन क्लिक jQueryकरने पर कुछ करने के लिए कुछ कोड सेटअप करते myidहैं:

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

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

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

आप क्या उम्मीद करेंगे? हर बटन पर क्लिक करने से jQuery के साथ क्लिक इवेंट हैंडलर सेटअप निष्पादित होगा। दुर्भाग्य से ऐसा नहीं होगा। केवल 1 बटन क्लिक हैंडलर कहता है। अन्य 2 पर क्लिक करने से कुछ नहीं होता है। ऐसा लगता है जैसे वे बटन बिल्कुल नहीं थे!

इसलिए हमेशा तत्वों IDsको अलग-अलग असाइन करें HTML। यह आपको अजीब चीजों के खिलाफ कवर मिलेगा। :)

<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>

अब यदि आप क्लिक इवेंट हैंडलर को चलाना चाहते हैं जब किसी भी बटन पर क्लिक किया जाता है तो यह पूरी तरह से काम करेगा यदि आप चयनकर्ता को jQuery कोड में बदलकर CSSउनके लिए इस तरह लागू क्लास का उपयोग करें:

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

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

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

Comments

क्या होगा अगर मेरे पास एक "# कॉन्टेंट" है जिसे मैंने पहले ही एक चर में संदर्भित किया है, और एक # मेरा-डिव # कॉन्टेंट जो मेरे पास केवल कुछ क्षणों के लिए है जिसके बाद मैं संदर्भित नोड को हटा देता हूं और इसके चर को भूल जाता हूं, जिसके बाद # div #content मूल को बदलने के लिए myDiv.outerHTML = myDiv.innerHTML करता है। यह #decoy में #content की सभी शैलियों और सामग्रियों को हार्ड कॉपी करने और समान कार्य करने की आवश्यकता को बचाता है। संक्रमण करते समय यह समझ में आता है।

— दिमित्री

इसका मतलब यह है कि, भले ही मैं एक ही आईडी के कई तत्वों को जोड़ने के लिए 'परिशिष्ट' का उपयोग करता हूं, डोम केवल पहले तत्व को वास्तविक मानता है, आदर्श रूप से 1 आईडी = 1 तत्व

— करण काव

Answer 5

एक ही आईडी वाले दो तत्व मान्य नहीं हैं। आईडी अद्वितीय हैं, यदि आप ऐसा कुछ करना चाहते हैं, तो कक्षा का उपयोग करें। यह मत भूलो कि तत्वों को एक परिधि के रूप में एक स्थान का उपयोग करके कई वर्ग हो सकते हैं:

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

Answer 6

HTML के लिए आधिकारिक युक्ति में कहा गया है कि आईडी टैग अद्वितीय होने चाहिए और आधिकारिक कल्पना यह भी बताती है कि यदि रेंडर पूरा किया जा सकता है, तो यह होना चाहिए (यानी HTML में "त्रुटियां" जैसी कोई चीज नहीं है, केवल "अमान्य" HTML)। तो, निम्नलिखित है कि कैसे आईडी टैग वास्तव में व्यवहार में काम करते हैं । वे सभी अमान्य हैं , लेकिन फिर भी काम करते हैं:

यह:

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

सभी ब्राउज़रों में ठीक रेंडर। हालाँकि, document.getElementById केवल एक ऑब्जेक्ट लौटाता है, एक सरणी नहीं; आप कभी भी केवल आईडी टैग के माध्यम से पहले div का चयन कर पाएंगे। यदि आप जावास्क्रिप्ट का उपयोग करके पहले div की आईडी को बदलना चाहते थे, तो दूसरी ID तब document.getElementById (Chrome, FireFox & IE11 पर परीक्षण) के साथ सुलभ होगी। आप अभी भी अन्य चयन विधियों का उपयोग करके div का चयन कर सकते हैं, और यह आईडी संपत्ति सही ढंग से वापस आ जाएगी।

कृपया ध्यान दें कि उपरोक्त समस्या एसवीजी छवियों को प्रस्तुत करने वाली साइटों में एक संभावित सुरक्षा भेद्यता को खोलती है, क्योंकि एसवीजी को डोम तत्व शामिल करने की अनुमति है, और उन पर आईडी टैग भी हैं (अपलोड की गई छवियों के माध्यम से स्क्रिप्ट डोम पुनर्निर्देशन की अनुमति देता है)। जब तक एसवीजी तत्व को प्रतिस्थापित करने से पहले डोम में तैनात किया जाता है, तब तक छवि अन्य तत्व के लिए सभी जावास्क्रिप्ट घटनाओं को प्राप्त करेगी।

यह मुद्दा वर्तमान में किसी के रडार पर नहीं है जहाँ तक मुझे पता है, फिर भी यह वास्तविक है।

यह:

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

इसके अलावा सभी ब्राउज़रों में ठीक प्रदान करता है। हालाँकि, इस तरीके को परिभाषित करने वाली केवल पहली आईडी का उपयोग किया जाता है, यदि आपने दस्तावेज़ की कोशिश की है ।getElementById ('अद्वितीय-भी'); उपरोक्त उदाहरण में, आपको शून्य (क्रोम, फ़ायरफ़ॉक्स और IE11 पर परीक्षण) लौटाया जाएगा ।

यह:

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

इसके अलावा, सभी ब्राउज़रों में ठीक है, हालांकि, वर्ग टैग के विपरीत जो एक स्थान से अलग किया जा सकता है, आईडी टैग रिक्त स्थान की अनुमति देता है, इसलिए उपरोक्त तत्व की आईडी वास्तव में "अद्वितीय अद्वितीय-दो" है, और "अद्वितीय" के लिए डोम से पूछ रही है या अलगाव में "अद्वितीय-दो" तब तक शून्य हो जाता है जब तक कि अन्यथा डोम में कहीं और परिभाषित न हो (क्रोम, फायरफॉक्स और IE11 पर परीक्षण किया गया)।

Comments

"आईडी टैग रिक्त स्थान की अनुमति देता है" - हालांकि, कल्पना के अनुसार , "मूल्य में कोई अंतरिक्ष वर्ण नहीं होना चाहिए।"

— मृद्वीथ

मैं सहमत हूँ। हालांकि, वहाँ कल्पना है, और वहाँ है कि कैसे ब्राउज़र काम करते हैं। ब्राउज़र ऐतिहासिक रूप से कल्पना को एक लक्ष्य के रूप में मानते हैं, लेकिन कई वस्तुओं पर सख्त नहीं हुए हैं। मुझे लगता है कि वे ऐसा करते हैं क्योंकि अगर वे कल्पना से मिलते तो यह कई मौजूदा साइटों या कुछ को तोड़ देता। मैं शीर्ष पर उल्लेख करता हूं कि हालांकि ये चीजें काम करती हैं, वे अमान्य हैं।

— निक स्टील

Answer 7

SLaks का उत्तर सही है, लेकिन एक परिशिष्ट के रूप में ध्यान दें कि x / html चश्मा निर्दिष्ट करता है कि सभी आईडी को एक (एकल) HTML दस्तावेज़ में अद्वितीय होना चाहिए । हालाँकि यह बिल्कुल नहीं है कि ऑप ने जो पूछा, वह वैध उदाहरण हो सकता है जहाँ एक ही आईडी कई पृष्ठों में विभिन्न संस्थाओं से जुड़ी होती है।

उदाहरण:

(आधुनिक ब्राउज़रों के लिए सेवा) लेख # मुख्य-सामग्री { स्टाइल वन वे }
(लीगेसी परोसी गई) div # मुख्य-सामग्री { स्टाइल एक और तरीका }

शायद एक एंटीपैटर्न हालांकि। बस यहाँ शैतान के वकील बिंदु के रूप में छोड़ रहे हैं।

Comments

अच्छी बात। हालाँकि डायनामिकली जेनरेट की गई सामग्री को दूसरे पेज में डाला जाना चाहिए, लेकिन पूरी तरह से आईडी से बचना चाहिए। Ids प्रोग्रामिंग भाषाओं में ग्लोबल्स की तरह हैं, आप उनका उपयोग कर सकते हैं, और वैध मामले हैं जहां यह एक अच्छा हैक है जो चीजों को सरल करता है। हैक करने से पहले चीजों को करने पर विचार करना एक अच्छा अभ्यास है।

— साइको ब्रम

Answer 8

और जो इसके लायक है, उसके लिए क्रोम 26.0.1410.65, फ़ायरफ़ॉक्स 19.0.2, और सफारी 6.0.3 कम से कम, यदि आपके पास एक ही आईडी के साथ कई तत्व हैं, तो jquery चयनकर्ता (कम से कम) उस आईडी के साथ पहला तत्व वापस करेगा।

जैसे

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

तथा

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

परीक्षण के लिए http://jsfiddle.net/RuysX/ देखें ।

Comments

जब तक आप एक अधिक जटिल चयनकर्ता का उपयोग नहीं करते हैं, जैसे कि div#oneयह निश्चित रूप से इस तथ्य को नहीं बदलता है कि यह अमान्य है।

— केविन बी

संभवतः यह उत्तर सत्य है, मैं यह अनुभव से कह रहा हूं।

— दिब्यांशु जायसवाल

Answer 9

खैर, HTML5 के लिए w3.org पर HTML सत्यापनकर्ता का उपयोग करके , आईडी अद्वितीय होना चाहिए

निम्नलिखित को धयान मे रखते हुए...

<!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>

सत्यापनकर्ता के साथ प्रतिक्रिया करता है ...

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>

... लेकिन ओपी ने विशेष रूप से कहा - विभिन्न तत्व प्रकारों के बारे में क्या। तो निम्नलिखित HTML पर विचार करें ...

<!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>

... सत्यापनकर्ता से परिणाम है ...

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

निष्कर्ष:

या तो मामले में (एक ही तत्व प्रकार, या विभिन्न तत्व प्रकार), यदि आईडी का उपयोग एक से अधिक बार किया जाता है, तो इसे वैध एचटीएमएल 5 नहीं माना जाता है।

Answer 10

हम आईडी का उपयोग करने के बजाय वर्ग नाम का उपयोग कर सकते हैं। html id अद्वितीय होनी चाहिए लेकिन कक्षाएं नहीं हैं। वर्ग नाम का उपयोग करते हुए डेटा प्राप्त करने पर आपकी js फ़ाइलों में कोड लाइनों की संख्या कम हो सकती है।

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

Answer 11

मुझे लगता है कि आप ऐसा नहीं कर सकते क्योंकि आईडी अद्वितीय है आपको इसका उपयोग एक तत्व के लिए करना है। आप उद्देश्य के लिए कक्षा का उपयोग कर सकते हैं

Answer 12

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

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

आईडी में केवल पहला div तत्व होता है। इसलिए भले ही एक ही आईडी के साथ कई तत्व हों, लेकिन दस्तावेज़ ऑब्जेक्ट केवल पहले मैच में वापस आ जाएगा।

Answer 13

नहीं, आईडी को विशिष्ट होना चाहिए। आप उस उद्देश्य के लिए कक्षाओं का उपयोग कर सकते हैं

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

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

Answer 14

क्या एक ही कक्षा में एक से अधिक छात्रों के पास एक ही रोल / आईडी नंबर होना संभव है? HTML idविशेषता में ऐसा है। आप उनके लिए एक ही कक्षा का उपयोग कर सकते हैं। उदाहरण के लिए:

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

और इसी तरह।

Answer 15

आमतौर पर, html पेज में कई बार एक ही आईडी का उपयोग नहीं करना बेहतर होता है। फिर भी, एक पेज में कई बार एक ही आईडी का उपयोग करना संभव है। हालाँकि जब आप नीचे दिए गए URI / URL के हिस्से के रूप में एक आईडी का उपयोग करते हैं:

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

और यदि वेब पेज में केवल एक (स्पैन) तत्व के लिए ID ('2015_FIFA_corruption_case') का उपयोग किया जाता है:

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

कोई दिक्कत नहीं होगी। इसके विपरीत, एक ही आईडी एक से अधिक स्थानों पर मौजूद है, ब्राउज़र भ्रमित हो जाएगा।

Answer 16

हा वो कर सकते है।

मुझे नहीं पता कि ये सभी अटूट पुराने हैं, लेकिन सिर्फ यूट्यूब खोलें और html का निरीक्षण करें। सुझाए गए वीडियो का निरीक्षण करने की कोशिश करें, आप देखेंगे कि उन सभी की आईडी और दोहराई जाने वाली संरचना निम्नानुसार है:

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