2012-07-15 3 views
116

हैं:एक स्ट्रिंग के साथ शुरू होने वाली आईडी का चयन करने के लिए सीएसएस कैसे प्राप्त करें (जावास्क्रिप्ट में नहीं)? एचटीएमएल इस तरह तत्व है

id="product42" 
id="product43" 
... 

मैं उन आईडी के "उत्पाद" के साथ शुरू के सभी का मिलान कैसे करते हैं?

मैंने जवाब देखा है जो वास्तव में जावास्क्रिप्ट का उपयोग करते हैं, लेकिन केवल सीएसएस के साथ इसे कैसे करें?

उत्तर

225
[id^=product] 

^= इंगित करता है "के साथ शुरू होता" यह क्या कक्षाओं के लिए कर रहे हैं। इसके विपरीत, $= इंगित करता है "समाप्त होता है"।

प्रतीकों को वास्तव में रेगेक्स वाक्यविन्यास से उधार लिया जाता है, जहां ^ और $ का मतलब क्रमशः "स्ट्रिंग की शुरुआत" और "स्ट्रिंग का अंत" है।

पूर्ण जानकारी के लिए the specs देखें।

+0

विधि और स्पष्टीकरण के लिए धन्यवाद, मैंने अपना प्रश्न संपादित कर लिया है ताकि यह और अधिक स्पष्ट हो। जिज्ञासा से बाहर, आईडी की स्ट्रिंग के अंदर एक स्ट्रिंग से मिलान करने का कोई तरीका है? – guptron

+0

देखें [चश्मा] (http://www.w3.org/TR/css3-selectors/#attribute-substrings), वे इसे बेहतर से समझा सकते हैं! –

+0

@itamar: मैं अपने उत्तर को संपादित करने के आपके प्रयास की सराहना करता हूं, लेकिन उद्धरण केवल तभी आवश्यक होता है जब मान में ऐसे वर्ण हों जो वैध पहचानकर्ता नहीं हैं। 'उत्पाद' स्पष्ट रूप से एक मान्य पहचानकर्ता है, और इसलिए कोई उद्धरण की आवश्यकता नहीं है। –

44

मैं इस तरह यह करना चाहते हैं:

[id^="product"] { 
    ... 
} 

आदर्श रूप में, एक वर्ग का उपयोग करें।

<div id="product176" class="product"></div> 
<div id="product177" class="product"></div> 
<div id="product178" class="product"></div> 

और अब चयनकर्ता बन जाता है:

.product { 
    ... 
} 
+0

@ ब्लेंडर, धन्यवाद, मैंने दूसरा जवाब चुना क्योंकि यह मेरे लिए थोड़ा और बताता है कि प्रतीकों का उपयोग किया जा रहा है। मैं इस परिदृश्य के लिए कक्षाओं का उपयोग नहीं कर सकता, अन्यथा, हाँ यह अच्छा होगा। – guptron

0

मैंने देखा कि एक और सीएसएस चयनकर्ता है जो वही काम करता है। वाक्य रचना इस प्रकार है:

[id|="name_id"] 

यह चुन लिए जाएँगे सभी तत्वों आईडी जो शब्द डबल उद्धरण में संलग्न के साथ शुरू होता है।

+0

यह काम नहीं कर रहा है –

+0

आपने कैसे देखा? संदर्भ? –

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

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