কীভাবে jqLite ব্যবহার করে শ্রেণীকরণে কোনও উপাদান নির্বাচন করবেন?

Question

এটিকে হালকা করার জন্য আমি আমার Angular.js অ্যাপ্লিকেশন থেকে jquery অপসারণ করার চেষ্টা করছি এবং এর পরিবর্তে অ্যাংুলারের jqLite লাগাব। তবে অ্যাপ্লিকেশনটি ('# আইডি') এবং সন্ধান ('.ক্লাসনাম') এর ভারী ব্যবহার করে, যা jqLite দ্বারা সমর্থিত নয়, কেবল 'ট্যাগের নাম' (ডকুমেন্টেশন অনুসারে)

আপনি কী ভাবছেন যে এটিকে পরিবর্তন করার সর্বোত্তম পন্থা হবে। আমি যে পদ্ধতির বিষয়ে ভেবেছিলাম তা হ'ল কাস্টম এইচটিএমএল ট্যাগ তৈরি করা। উদাহরণস্বরূপ: পরিবর্তন
<span class="btn btn-large" id="add-to-bag">Add to bag</span>

প্রতি

<a2b style="display:none;"><span class="btn btn-large" >Add to bag</span></a2b>

এবং

$element.find('#add-to-bag') 

প্রতি

$element.find('a2b')

কোন চিন্তা? অন্যান্য ধারণা?

ধন্যবাদ

Lior

Comments

আইডি অবশ্যই অনন্য হতে হবে, সুতরাং আইডি দ্বারা অন্য উপাদানটির শিশু যে উপাদানটি খুঁজে পাওয়া কোনও বোধগম্য নয়। আইডি দ্বারা উপাদানটি নির্বাচন করুন। আপনার আইডি যদি অনন্য না হয় তবে আপনার আইডিটি কোনও শ্রেণিতে পরিবর্তন করুন। এছাড়াও, আপনি DomElement.querySelector(".myclassname")সিএসএস নির্বাচক ব্যবহার করে একটি একক প্রতারণামূলক উপাদান বা এটিতে সমস্ত যোগ করে সব মিলিয়ে বাছাই করতে ব্যবহার করতে পারেন : DomElement.querySelectorAll(".myclassname")এটি অবশ্যই আই <9 তে কাজ করে না।

— কেভিন বি

আপনি যদি কোনও a2bউপাদান সংজ্ঞায়িত করেন তবে অবশ্যই আপনাকে একটি নির্দেশিকা নির্ধারণ করতে হবে। নির্দেশিকার লিঙ্ক ফাংশনে যা করা দরকার তা আপনি করতে পারেন এবং তাই ফাইন্ড () কে পুরোপুরি কল করার প্রয়োজন এড়াতে পারেন? একইভাবে আপনার ক্লাসগুলির সাথে - আপনি কী নির্দেশাবলী সংজ্ঞায়িত করতে পারেন এবং আপনার প্রয়োজনীয় কার্যকারিতাটি নির্দেশকের লিঙ্কে (বা সংকলন) ফাংশনে রাখতে পারেন?

— রাজকক

@ কেভিনবি অ্যাংুলার এর জকি লাইট 'কেবল ট্যাগ নাম'

— লায়ার

@ মারকরাজাকক আমি কোনও নির্দেশনার সংজ্ঞা দিই নি। এটি IE এবং ক্রোমে কাজ করে বলে মনে হচ্ছে। তবে আমি যদি কোনও নির্দেশকে সংজ্ঞায়িত করি তবে কেন এটি সহায়তা করবে? আমার এখনও একটি ডিওএম উপাদান ধরে রাখা দরকার।

— লাইয়ার

কীভাবে আসবেন ('span.btn') বা অনুরূপ আপনার জন্য কাজ করে না?

— ফবি

Answer 1

মূলত, এবং @ কেভিন-বি দ্বারা উল্লিখিত:

// find('#id')
angular.element(document.querySelector('#id'))

//find('.classname'), assumes you already have the starting elem to search from
angular.element(elem.querySelector('.classname'))

দ্রষ্টব্য: আপনি যদি নিজের কন্ট্রোলারদের কাছ থেকে এটি করতে চান তবে আপনি বিকাশকারীদের "সঠিকভাবে নিয়ন্ত্রণকারী ব্যবহার করা" বিভাগটি একবারে দেখতে চান এবং আপনার উপস্থাপনার যুক্তিটিকে যথাযথ দিকনির্দেশনাগুলিতে (যেমন <a2b ...>) রিফ্যাক্ট করতে পারেন ।

Comments

ধন্যবাদ! রিকার্ডো বিন উত্তর (কৌণিক এর মেইলিং লিস্টে) থেকে যোগ করার জন্য, $ ডকুমেন্ট ইঞ্জেকশনভিত্তিক খুব ব্যবহার করা যেতে পারে: jsfiddle.net/ricardohbin/fTQcs

— Lior

দুর্ভাগ্যক্রমে, উল্লেখ করা URL টি আর বৈধ নয় ( ডকস.অঙ্গুলারজেএস.আর.গুয়েড / দেব_গাইড.এমভিসি.ফান্ডার্সিং_কন্ট্রোলার ) এবং এই বিভাগে কোনও প্রতিস্থাপন বলে মনে হয় না।

— আরনসন

নং কৌণিক.এলিমেন্ট (ডকুমেন্ট.কোয়ারিসিলিটর ('# আইডি')) হ'ল বিকল্প: $ ('# আইডি'), এর জন্য নয়: এলিমেন্টআর.ইফাইন্ড ('# আইডি')

— ব্রোদা নোয়েল

ঠিক আছে - তবে আমরা যেমন পেয়েছি যে আমরা কৌণিকভাবে আমাদের অ্যাপ্লিকেশনটির নতুন অংশগুলি তৈরি করি আমাদের মাঝে মাঝে এটি পুরানো অংশগুলি "নালী টেপ" করা দরকার যতক্ষণ না সেগুলি আপডেট করা বা পুনরায় ফ্যাক্টর করা যায়। আমাদের ক্ষেত্রে আমাদের বিদ্যমান জগাখিচুড়ি পরিবর্তন না করেই কিছু পুরানো jquery / এজাক্স ডেটা লোড করা দরকার তাই আমরা নিম্নলিখিতগুলি করেছি - $ http.get ('/ Task / GetTaskStatsByTaskId /' + TaskId) .সুকস (ফাংশন (ডেটা) {কৌনিক.এলিমেন্ট) (ডকুমেন্ট.কোয়ারেসিলেক্টর ('# ইউজারটাস্কস কনটেনার'))। এইচটিএমএল (ডেটা);});

— কেন

যদি এলেম একটি জিক্লাইট অবজেক্ট হয় তবে তা হবেangular.element(elem[0].querySelector('.classname'));

— ক্লিভারসপ্রকেট

Answer 2

অ্যাঙ্গুয়ালার jquery এর হালকা সংস্করণ ব্যবহার করে যার নাম jqlite যার অর্থ এটিতে jQuery এর সমস্ত বৈশিষ্ট্য নেই। আপনি jquery থেকে কী ব্যবহার করতে পারেন সে সম্পর্কে এখানে কৌণিক ডক্সে একটি উল্লেখ রয়েছে। কৌণিক উপাদান উপাদান ডক্স

আপনার ক্ষেত্রে আপনাকে আইডি বা শ্রেণীর নাম সহ একটি ডিভের সন্ধান করতে হবে। শ্রেণীর নামের জন্য আপনি ব্যবহার করতে পারেন

var elems =$element.find('div') //returns all the div's in the $elements
    angular.forEach(elems,function(v,k)){
    if(angular.element(v).hasClass('class-name')){
     console.log(angular.element(v));
}}

অথবা আপনি ক্যোয়ারী নির্বাচক দ্বারা আরও সহজ উপায়ে ব্যবহার করতে পারেন

angular.element(document.querySelector('#id'))

angular.element(elem.querySelector('.classname'))

এটি jQuery এর মতো নমনীয় নয় তবে কী

Answer 3

যদি আপনার elem.find()জন্য কাজ না করে থাকে তবে পরীক্ষা করুন যে আপনি কৌনিক স্ক্রিপ্টের আগে JQuery স্ক্রিপ্টটি অন্তর্ভুক্ত করছেন ....

Comments

যদিও ওপি বিশেষত jqLite সম্পর্কে জিজ্ঞাসা করেছিল, jQuery ব্যবহার করে এবং ক্লাস এবং আইডির সাথে কাজ করার জন্য সন্ধানের () প্রত্যাশার পাশাপাশি এই উত্তরটি অবশ্যই সহায়তা করতে পারে।

— ম্যাট বি

স্পষ্ট করার জন্য: "jQuery উপলভ্য থাকলে, কৌণিক.এলিমেন্টটি jQuery ফাংশনের জন্য একটি উপনাম j থেকে উদ্ধৃত docs.angularjs.org/api/ng/function/angular.element । jqLite ফাইন্ড () রয়েছে।

— কুমাসেকজ