2012-06-18 16 views
8

संभव डुप्लिकेट:
Several elements with the same ID responding to one CSS ID selectorएकाधिक HTML टैग्स में एक ही आईडी का उपयोग करना?

नीचे उदाहरण कोड है कि मैं परीक्षण किया गया था और मैं उलझन में मिल गया। हर कोई कहता है कि हम इसका उपयोग कर सकते हैं या हमें प्रति आईडी केवल एक बार उपयोग करना चाहिए, लेकिन मेरे पास कई बार इसका उपयोग करके परीक्षण है लेकिन यह मुझे सही आउटपुट दे रहा है।

मुझे क्या करना चाहिए?

यह थोड़े इस उदाहरण में मेरे लिए एक ही तरह वर्ग काम कर रहा है

कोड:

<html> 
<head> 
<style> 

#exampleID1 { background-color: blue; } 
#exampleID2 { text-transform: uppercase; } 

</style> 
</head> 
<body> 
<p id="exampleID1">This paragraph has an ID name of "exampleID1" and has a blue CSS defined background.</p> 
<p id="exampleID2">This paragraph has an ID name of "exampleID2" and has had its text transformed to uppercase letters.</p> 

<address id="exampleID1"> 

Written by W3Schools.com<br /> 
<a href="mailto:[email protected]">Email us</a><br /> 
Address: Box 564, Disneyland<br /> 
Phone: +12 34 56 78 
</address> 


<blockquote id="exampleID1"> 
Here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation. 
</blockquote> 

</body> 
</html> 

कृपया उपरोक्त कोड देख सकते हैं और मुझे जवाब यही कारण है कि हम एक पृष्ठ समय में आईडी चयनकर्ता दो बार प्रयोग नहीं करना चाहिए यह ठीक काम कर रहा है।

+1

सीएसएस वास्तव में परवाह नहीं करता है यदि आप आईडी और कक्षाओं का उपयोग करते हैं। जावास्क्रिप्ट परवाह करता है। जावास्क्रिप्ट बहुत परवाह करता है। – SpaceBeers

+1

सिर्फ इसलिए कि आप इसका मतलब यह नहीं कर सकते कि आपको चाहिए। – BoltClock

उत्तर

16

एक आईडी एक पृष्ठ में अद्वितीय होना चाहिए। यदि आप तत्वों के समूह का वर्णन करना चाहते हैं तो कक्षा का प्रयोग करें।

हमें काम करने के दौरान पृष्ठ में दो बार आईडी चयनकर्ता का उपयोग क्यों नहीं करना चाहिए।

आप एक त्रुटि कर रहे हैं और प्रत्येक ब्राउज़र पर निर्भर करता है जो पृष्ठ को कभी भी इसकी क्षतिपूर्ति के लिए देखेगा। आप सुनिश्चित नहीं कर सकते कि वे सभी करेंगे।

+1

और विशेष रूप से जावास्क्रिप्ट ** डुप्लिकेट आईडी के साथ आप जो करते हैं उसके आधार पर ** टूट जाएगा। तथ्य यह है कि किसी दिए गए आईडी के साथ केवल एक तत्व ब्राउज़र को पेड़ की यात्रा करते समय सभी प्रकार की मान्यताओं/अनुकूलन करने की अनुमति देता है। – ThiefMaster

+0

मेरा संदेह साफ़ करने के लिए धन्यवाद। –

2

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

0

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

इसके पीछे तर्क यह है कि आईडी को अद्वितीय तत्वों की पहचान करने के लिए उपयोग किया जाता है।

पृष्ठ अभी भी प्रस्तुत करना होगा, अवैध होने के बावजूद, लेकिन सबसे बड़ा व्यावहारिक समस्या यह है कि जावास्क्रिप्ट और अन्य पुस्तकालयों धारणा है कि आईडी इतना अद्वितीय हैं, यदि आप एक आईडी के साथ सभी तत्वों को लाने के लिए कोशिश कर रहे हैं पर काम करने के लिए अनुकूलित कर रहे हैं और उन्हें छुपाएं उदाहरण के लिए , JQuery

$('#exampleID1').hide(); 

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

+1

लेकिन '$ ('* # exampleID1')। छुपाएं() 'काम करता है। सिर्फ एक नोट। – Leonid

0

कारण है कि हम एक पृष्ठ में आईडी चयनकर्ता दो बार उपयोग नहीं करना चाहिए, जबकि इसकी काम कर ठीक

क्योंकि आप अगर यह हर ब्राउज़र में ठीक काम कर रहा है पता नहीं है।

विनिर्देशों का कहना है कि पृष्ठ में एक आईडी अद्वितीय होना चाहिए, इसलिए जब ब्राउज़र को आपकी डुप्लिकेट आईडी मिलती है: तो वे इसे जितना संभव हो उतना संभालने का प्रयास करेंगे।अधिकांश ब्राउज़र केवल पहले तत्व के लिए पहचान का उपयोग करके इसे संभालने लगते हैं, लेकिन तत्वों पर आईडी विशेषता को छोड़कर ताकि आपका सीएसएस अभी भी काम कर सके, लेकिन इस बात की कोई गारंटी नहीं है कि सभी ब्राउज़र इसे इस तरह से संभालते हैं।

विभिन्न ब्राउज़र विक्रेता गलत मार्कअप को संभालने के लिए अलग-अलग रणनीति का उपयोग करते हैं, और प्रत्येक विक्रेता को "नया, बेहतर" तरीका मिल जाता है, इसलिए गलत मार्कअप आमतौर पर जितना संभव हो उतने अलग-अलग तरीकों से संभाला जाता है।

5

मुझे लगता है कि समझने का आसान तरीका एक उत्पाद के साथ समानता कर रहा है। कल्पना करें कि ID एक सीरियल नंबर की तरह काम करता है, दूसरे शब्दों में, यह अद्वितीय होना चाहिए, इस तरह आप ऐसे उत्पाद की पहचान कर सकते हैं जिसमें बराबर प्रतियों के लाखों हैं।

फिर, class उत्पाद कोड के रूप में कल्पना करें, उदाहरण के लिए बार कोड हो सकता है। सुपरमार्केट में सभी बराबर उत्पादों में ऑप्टिकल रीडर द्वारा पढ़ने के लिए एक ही बार कोड होता है।

तो, ID एक अद्वितीय पहचानकर्ता है और class समूह तत्वों का समूह है।

लेकिन अगर मैं अपने एचटीएमएल/सीएसएस में उसी ID का उपयोग कर रहा हूं तो मुझे एक आदर्श परिणाम मिल रहा है, मुझे अद्वितीय ID एस के बारे में चिंतित क्यों होना चाहिए?

कारण नंबर 1:

भविष्य में, आप और जावास्क्रिप्ट का उपयोग करने की जरूरत है अगर आप एक विशिष्ट तत्व में हेरफेर करने की जरूरत है और यह एक दोहराया ID है, अपने कोड अपेक्षित परिणाम उत्पन्न नहीं होगा।

कारण नंबर 2

आपका कोड W3C द्वारा valited नहीं किया जाएगा, क्या मतलब है कि आप ब्राउज़र करवाते हैं अपनी वेबसाइट के compability के साथ सिर दर्द हो सकता है। यह एक ब्राउज़र में और दूसरे में ठीक काम कर सकता है।

कोई वास्तविक उदाहरण का उपयोग करना, कल्पना करें कि आप dinamically अद्यतन करने के लिए, जावास्क्रिप्ट, इस तत्व की पाठ का उपयोग करना चाहते हैं:

$("#exampleID1").html("Changing element content"); 
:

<blockquote id="exampleID1"> 
Here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation. 
</blockquote> 
जावास्क्रिप्ट/JQuery के साथ

आप इस प्रकार का कोड का उपयोग करेगा

और उसके बाद तत्व <blockquote id="exampleID1"> का पाठ अपडेट किया जाएगा, लेकिन नीचे दिया गया तत्व भी अपडेट किया जाएगा, क्योंकि इसमें ID है।

<p id="exampleID1">This paragraph has an ID name of "exampleID1" and has a blue CSS defined background.</p> 

इसलिए, यदि आप सिर्फ एक तत्व को अपडेट करना चाहते हैं, वे अद्वितीय ID रों होना आवश्यक है।

मुझे आशा है कि आप ID और class के बीच के अंतर को बेहतर ढंग से समझने के लिए इस स्पष्टीकरण का उपयोग कर सकते हैं।

+0

हाय, अगर मैं दस्तावेज़ का उपयोग कर रहा हूं .getElementbyId ("परिणाम")। Innerhtml = d; और मैं id = "परिणाम" के साथ कई divs चाहता हूँ। इसके लिए एक अच्छा काम क्या है? –

+0

@ कालाज, मुझे लगता है कि कक्षा um का उपयोग करके इसे हल किया जा सकता है –

संबंधित मुद्दे