w3schools JQuery সঙ্গে উপাদান আইডি মধ্যে কোলন হ্যান্ডলিং




jquery w3schools (8)

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

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

আমরা jQuery এর সাহায্যে JS কোডে "test: abc" আইডি দিয়ে ডিভ উপাদান অ্যাক্সেস করতে সক্ষম নই।

<div id="test:abc">

$('#test:abc') 

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


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

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

সংক্ষেপে

$(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নজর রাখুন যা কলোনগুলির সাথে আইডিগুলির নির্বাচন পদ্ধতিগুলির গতি পরীক্ষা করে এবং তুলনা করে

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

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

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

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

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

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

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


71 $("#nocolon")

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

বিশেষত

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

একটি বিস্ময় হিসাবে একটি বিট আসে


$('#test\\:abc')


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


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

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

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

$('#test\\:abc')

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

DEMO

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

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

Reference





jquery