JQuery সহ উপাদান আইডিতে কোলন পরিচালনা করা

Question

আমরা jQuery ব্যবহার করে জেএস কোডে আইডি "টেস্ট: এবিসি" দিয়ে ডিভ উপাদানটি অ্যাক্সেস করতে পারছি না।

<div id="test:abc">

$('#test:abc') 

কোলন ছাড়াই এটা ঠিক কাজ করছে। ত্রিনিদাদ সাব ফর্মগুলিতে এটি স্বয়ংক্রিয়ভাবে উত্পাদিত হওয়ায় আইডি জেনারেশনে আমাদের নিয়ন্ত্রণ নেই কারণ এটি এর :ভিতরে থাকা প্রতিটি উপাদানগুলির সাথে উপ ফর্ম আইডি সংযুক্ত করে।

Comments

মূলত এটি ভাল, কিছুই গৃহীত হয় নি, কারণ সর্বোত্তম উত্তরটি শেষ পর্যন্ত শীর্ষ রেট দেওয়া হয় না (ইঙ্গিত: আমার উত্তরটি দেখুন)

— তোসকান

আমি আনন্দিত যে আপনি একটি সমাধান পেয়েছেন, ত্রিনিদাদ উপ ফর্মগুলির তাদের নামকরণের সম্মেলনগুলি বাছাই করা দরকার।

— জ্যাক টাক

আইবিএম ডমিনো (এক্সপেজ) একই কাজ করে। কোলন লেজাইটমেট আইডি টেক্সট হ'ল এটি সত্যিই সমস্যা qu

— ব্যবহারকারী2808054

Answer 1

দুটি ব্যাক-স্ল্যাশ ব্যবহার করে আপনার কোলন থেকে পালাতে হবে:

$('#test\\:abc')

Answer 2

সংক্ষেপে

$(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); 

গতি / সময়

এই জেসবিনটি দেখুন যা আইডির নির্বাচনের পদ্ধতির গতি এবং কলোনগুলির সাথে তুলনা করে

ফলাফল পেতে আপনার ফায়ারব্যাগ কনসোলটি খুলতে হবে।

আমি এটি ফায়ারফক্স 10 এবং jquery 1.7.2 দিয়ে পরীক্ষা করেছি

মূলত আমি আইডিটিতে একটি কোলনের সাথে একটি ডিভের 10'000 বার একটি নির্বাচন করেছি - এটি অর্জনের জন্য বিভিন্ন পদ্ধতির সাথে। তারপরে আমি কোনও আইডির নির্বাচনের সাথে ফলাফলগুলিকে কোনও কোলন না দিয়ে তুলনা করেছি, ফলাফলগুলি বেশ অবাক করে।

বাম সময় এমএস ডান নির্বাচক পদ্ধতিতে

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

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

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


71 $("#nocolon")

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

বিশেষত

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

একটি চমক হিসাবে কিছু আসে

Comments

এটি সত্যিই দরকারী এবং আরও upvated করা উচিত। । এমনকি এই যদিও, $ ( "[আইডি = 'বিরক্তিকর: কোলন']", কাজ document.getElementById কি ব্যবহার করা উচিত বলে মনে হয়।

— আরউইন

কেবল একই জটিল ফলাফল সংরক্ষণাগারভুক্ত করার জন্য আরও জটিল কোড ব্যবহার করা কেবলমাত্র দ্রুত কারণ অকাল অপ্টিমাইজেশনের ক্ষেত্রে। আপনি যদি না পারফরম্যান্সের ক্ষেত্রে বাধা হয়ে থাকেন তবে দ্রুত কোডের চেয়ে আপনার পঠনযোগ্য কোডটি সর্বদা পছন্দ করা উচিত। অথবা উইলিয়াম ওল্ফের কথায় : "অন্ধ বোকামি সহ অন্য কোন একক কারণে দক্ষতার নামে (অগত্যা তা অর্জন না করে) অধিক সংখ্যক পাপ সংঘটিত হয়।" আরও তথ্য এখানে ।

— এনফেকনার

নতুন jQuery (2.1.1) এর সাথে আরও ভাল বলে মনে হচ্ছে: 32 $("#annyoing\\:colon") , 29 $("[id='annyoing:colon']") , 5 $(document.getElementById("annyoing:colon")) , 8 $("#nocolon") , 31 $("[id='nocolon']")

— মাহে

@ মোহরে শুনে ভাল লাগল। দুঃখের বিষয় আইই 8 এখনও একটি সমস্যা (এবং jQuery 2 দ্বারা সমর্থিত নয়)। তবে

— আইই

@nfechner। আপনার মতে আরও পাঠযোগ্য কী? $("#annoying\\:colon")বা $(document.getElementById("annoying:colon"))?

— জাকুব গোধনিউক

Answer 3

স্পষ্টতই, এটি কোলনটিতে ট্রিপ আপ হচ্ছে, কারণ jQuery এটি নির্বাচক হিসাবে ব্যাখ্যা করার চেষ্টা করছে। আইডি বৈশিষ্ট্য নির্বাচনকারী ব্যবহার করে দেখুন।

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

Answer 4

আমি কেবল ব্যবহার করব document.getElementById, এবং ফলটি jQuery()ফাংশনে পাস করব ।

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

Answer 5

দুটি ব্যাকস্ল্যাশ ব্যবহার করুন \\

ডেমো

এখানে লিখিত হিসাবে

আপনি যদি কোনও মেটা-অক্ষর (যেমন! "# $% & '() * +,। /:; <=>? @ [] ^` {|} ~) এর আক্ষরিক অংশ হিসাবে ব্যবহার করতে চান নাম, আপনার অবশ্যই দুটি ব্যাকস্ল্যাশ সহ অক্ষরটি থেকে বাঁচতে হবে: \ উদাহরণস্বরূপ, আপনার যদি আইডি = "foo.bar" সহ একটি উপাদান থাকে তবে আপনি নির্বাচক use ("# foo \ .bar") ব্যবহার করতে পারেন The W3C CSS স্পেসিফিকেশন সম্পূর্ণ রয়েছে

উল্লেখ

Answer 6

তোসকানের উত্তরের উল্লেখ করে, আমি তার কোডটি কিছুটা আরও বেশি পঠনযোগ্য করে তৈরি করার জন্য আপডেট করেছি এবং তারপরে পৃষ্ঠায় আউটপুট আছি।

জিবিন লিঙ্কটি এখানে: 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']")

Answer 7

ব্যবহার করার চেষ্টা করুন $('#test\\:abc')

Answer 8

এই সিনট্যাক্সটি $('[id="test:abc"]') আমার পক্ষে কাজ করেছিল। আমি ব্যবহার করছি Netbeans 6.5.1& এটি এমন একটিযুক্ত উপাদান তৈরি করে idযা এ : (colon)। আমি চেষ্টা \\& \3Aকিন্তু তাদের কেউ কাজ করেন।

Answer 9

ব্যবহার $('[id=id:with:colon]')।