JQuery के साथ तत्व आईडी में कोलन को हैंडल करना

145

हम jQuery का उपयोग करके जेएस कोड में आईडी "टेस्ट: एबीसी" के साथ div तत्व तक पहुंचने में सक्षम नहीं हैं।

<div id="test:abc">

$('#test:abc')

यह बृहदान्त्र के बिना ठीक काम कर रहा है। ID जनरेशन पर हमारा नियंत्रण नहीं है क्योंकि यह त्रिनिदाद उप रूपों में स्वतः उत्पन्न होता है क्योंकि यह उप प्रपत्र ID :को इसके प्रत्येक तत्व के साथ जोड़ देता है।

jquery

— अमित सिंह
स्रोत

मूल रूप से यह अच्छा है कुछ भी स्वीकार नहीं किया गया था, क्योंकि सबसे अच्छा उत्तर अंततः शीर्ष रेटेड एक नहीं है (संकेत: मेरे उत्तर की जांच करें)

— Toskan

मुझे खुशी है कि आपको एक समाधान मिला, त्रिनिदाद उप रूपों को अपने नामकरण सम्मेलनों को सुलझाने की आवश्यकता है।

— जैक टक

आईबीएम डोमिनोज़ (xpages) यही काम करता है। यह वास्तव में jquery है कि यह समस्या है, यह देखते हुए कि एक बृहदान्त्र ID पाठ को वैध करता है।

— user2808054

209

आपको दो बैक-स्लैश का उपयोग करके कोलन से बचने की आवश्यकता है:

$('#test\\:abc')

— nfechner
स्रोत

85

संक्षेप में

$(document.getElementById("test:abc")) वह है जो आपको उपयोग करना चाहिए।

व्याख्या : गति लाभ के अलावा (नीचे और देखें), इसे संभालना आसान है।

उदाहरण: कहो कि आपके पास एक फ़ंक्शन है

   function doStuff(id){

       var jEle = $("#" + id); //is not safe, since id might be "foo:bar:baz" and thus fail. 
       //You would first have to look for ":" in the id string, then replace it

       var jEle = $(document.getElementById(id)); //forget about the fact 
      //that the id string might contain ':', this always works
    }

    //just to give an idea that the ID might be coming from somewhere unkown
    var retrievedId = $("foo").attr("data-target-id");
    doStuff(retrievedId);

गति / समय

इस jsbin पर एक नज़र डालें जो कोलन के साथ ID की चयन विधियों की गति का परीक्षण और तुलना करता है

परिणाम प्राप्त करने के लिए आपको अपना फायरबग कंसोल खोलने की आवश्यकता है।

मैंने इसे फ़ायरफ़ॉक्स 10 और jquery 1.7.2 के साथ परीक्षण किया

मूल रूप से मैंने आईडी में एक बृहदान्त्र के साथ एक div का चयन 10'000 बार किया - इसे प्राप्त करने के विभिन्न तरीकों के साथ। तब मैंने परिणामों की तुलना एक आईडी चयन के साथ की जिसमें कोई बृहदान्त्र नहीं था, परिणाम काफी आश्चर्यजनक हैं।

ms दाएँ चयनकर्ता विधि में बायाँ समय

299 $("#annoying\\:colon")

302 $("[id='annoying:colon']"

20 $(document.getElementById("annoying:colon"))


71 $("#nocolon")

294 $("[id='nocolon']")

ख़ास तौर पर

  71 $("#nocolon") and
299 $("#annoying\\:colon")

थोड़ा आश्चर्य के रूप में आता है

— Toskan
स्रोत

3

यह वास्तव में उपयोगी है और इसे और अधिक बढ़ा दिया जाना चाहिए। भले ही यह, $ ("[आईडी = 'कष्टप्रद: बृहदान्त्र']", काम करता है। दस्तावेज़ ।getElementById लगता है कि क्या उपयोग किया जाना चाहिए।

— इरविन

4

केवल एक ही परिणाम को संग्रहीत करने के लिए अधिक जटिल कोड का उपयोग करना सिर्फ इसलिए कि यह तेजी से समय से पहले अनुकूलन का मामला है। जब तक यह एक प्रदर्शन अड़चन नहीं है, आपको हमेशा तेज कोड पर पठनीय कोड पसंद करना चाहिए। या विलिअम वुल्फ के शब्द में : "अधिक कंप्यूटिंग पाप किसी अन्य एकल कारण की तुलना में दक्षता के नाम पर (आवश्यक रूप से इसे प्राप्त करने के बिना) - अंधा मूर्खता सहित प्रतिबद्ध हैं।" अधिक जानकारी यहाँ ।

— nfechner

3

नए jQuery (2.1.1) के साथ बेहतर लगता है: 32 $("#annyoing\\:colon") , 29 $("[id='annyoing:colon']") , 5 $(document.getElementById("annyoing:colon")) , 8 $("#nocolon") , 31 $("[id='nocolon']")

— मोहरा

@ मोहरे कि सुनने में अच्छा लगता है। अफसोस की बात है IE8 अभी भी एक मुद्दा है (और jQuery 2 द्वारा समर्थित नहीं है)। लेकिन IE8 के लिए उलटी गिनती चल रही है theie8countdown.com

— Toskan

1

@nfechner। आपकी राय में अधिक पठनीय क्या है? $("#annoying\\:colon")या $(document.getElementById("annoying:colon"))?

— जकूब गोडोनीउक

29

यह बृहदान्त्र पर ट्रिपिंग है, जाहिर है, क्योंकि jQuery एक चयनकर्ता के रूप में व्याख्या करने की कोशिश कर रहा है। आईडी विशेषता चयनकर्ता का उपयोग करने का प्रयास करें।

 $('[id="test:abc"]')

— tvanfosson
स्रोत

9

मैं सिर्फ उपयोग करूंगा document.getElementById, और परिणाम को jQuery()फंक्शन में पास करूंगा ।

var e = document.getElementById('test:abc');
$(e) // use $(e) just like $('#test:abc')

— wsanville
स्रोत

7

दो बैकस्लैश का उपयोग करें \\

डेमो

जैसा यहां लिखा गया है

यदि आप किसी भी मेटा-अक्षर (जैसे कि! "# $% & '() * +, /: </> <=>! @ [] ^` {|} ~ ~) का शाब्दिक भाग के रूप में उपयोग करना चाहते हैं। नाम, आपको दो बैकस्लैश के साथ वर्ण से बचना चाहिए: \ _ उदाहरण के लिए, यदि आपके पास आईडी = "foo.bar" के साथ एक तत्व है, तो आप चयनकर्ता $ ("# foo \" .bar ") का उपयोग कर सकते हैं। W3x CSS विनिर्देशन पूरा होता है

संदर्भ

— diEcho
स्रोत

4

तोस्कान के जवाब का जिक्र करते हुए, मैंने पेज को थोड़ा और पठनीय और फिर आउटपुट बनाने के लिए उसका कोड अपडेट किया।

यहाँ jbin लिंक है: http://jsbin.com/ujajuf/14/edit ।

इसके अलावा, मैंने इसे अधिक पुनरावृत्तियों के साथ चलाया

Iterations:1000000

Results:    
12794   $("#annyoing\\:colon")
12954   $("[id='annyoing:colon']"
754 $(document.getElementById("annyoing:colon"))
3294    $("#nocolon")
13516   $("[id='nocolon']")

और भी अधिक:

Iterations:10000000

Results:    
137987  $("#annyoing\\:colon")
140807  $("[id='annyoing:colon']"
7760    $(document.getElementById("annyoing:colon"))
32345   $("#nocolon")
146962  $("[id='nocolon']")

— रामसे
स्रोत

3

प्रयोग करके देखें $('#test\\:abc')

— मिथुन श्रीधरन
स्रोत

1

इस वाक्य रचना $('[id="test:abc"]') ने मेरे लिए काम किया। मैं उपयोग कर रहा हूँ Netbeans 6.5.1और यह एक के साथ घटक उत्पन्न करता idहै जिसमें a : (colon)। मैंने कोशिश की \\और \3Aउनमें से किसी ने भी काम नहीं किया।

— JVR
स्रोत

0

का उपयोग करें $('[id=id:with:colon]')।

— zindel
स्रोत