JqLite का उपयोग करके classname द्वारा एक तत्व का चयन कैसे करें?

110

मैं इसे हल्का बनाने के लिए अपने Angular.js ऐप से jquery को हटाने की कोशिश कर रहा हूं, और इसके बजाय कोणीय के jqLite डाल रहा हूं। लेकिन ऐप खोज ('# आईडी') और ढूंढने ('.classname') का भारी उपयोग करता है, जो jqLite द्वारा समर्थित नहीं हैं, केवल 'टैग नाम' (प्रलेखन के अनुसार)

आश्चर्य है कि आपको क्या लगता है कि इसे बदलने के लिए सबसे अच्छा तरीका होगा। एक दृष्टिकोण जो मैंने सोचा था कि कस्टम HTML टैग बनाने के लिए है। उदाहरण के लिए: परिवर्तन
<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')

कोई विचार? अन्य विचार?

धन्यवाद

लियोर

angularjs angularjs-directive jqlite

— लियोर
स्रोत

आईडी का विशिष्ट होना आवश्यक है, इसलिए इसका कोई मतलब नहीं है कि एक तत्व है जो आईडी द्वारा दूसरे तत्व का बच्चा है। बस आईडी द्वारा तत्व का चयन करें। यदि आपकी आईडी अद्वितीय नहीं है, तो अपनी आईडी को कक्षा में बदलें। इसके अलावा, आप DomElement.querySelector(".myclassname")एक सीएसएस चयनकर्ता का उपयोग करके एक एकल डिकेंडर तत्व का चयन करने के लिए उपयोग कर सकते हैं , या सभी को जोड़कर सभी मिलान कर सकते हैं: DomElement.querySelectorAll(".myclassname")अर्थात आईई 9 में काम नहीं करता है।

— केविन बी

यदि आप किसी a2bतत्व को परिभाषित करते हैं, तो आपने एक निर्देश निर्धारित किया होगा। क्या आप कर सकते हैं कि निर्देश के लिंक फ़ंक्शन में क्या करने की आवश्यकता है, और इसलिए पूरी तरह से कॉल () खोजने की आवश्यकता से बचें? इसी तरह अपनी कक्षाओं के साथ - क्या आप निर्देशों को परिभाषित कर सकते हैं और आपको निर्देश की लिंक (या संकलन) कार्यों में आवश्यक कार्यक्षमता डाल सकते हैं?

— मार्क राजकोक

@ केविनबी एंगुलर के जाइटलाइट को 'केवल टैग नामों' का समर्थन करने के लिए कहा जाता है

— लियोन

@MarkRajcok I ने एक निर्देश को परिभाषित नहीं किया। यह IE और क्रोम में काम करने लगता है। लेकिन यहां तक कि अगर मैं एक निर्देश को परिभाषित करता हूं, तो यह क्यों मदद करेगा? मुझे अभी भी DOM तत्व को पकड़ना होगा।

— जूनियर

कैसे पता लगाएं ('span.btn') या समान आपके लिए काम नहीं करता है?

— फबी

जवाबों:

202

अनिवार्य रूप से, और @ केविन-बी द्वारा नोट किया गया:

// 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 ...>) में बदल सकते हैं। ।

— psema4
स्रोत

धन्यवाद! रिकार्डो बिन उत्तर (कोणीय मेलिंग सूची) से जोड़ने के लिए, $ डॉक्यूमेंट इंजेक्टेबल का भी उपयोग किया जा सकता है: jsfiddle.net/ricardohbin/fTQcs

— Lior

दुर्भाग्य से, संदर्भित URL अब मान्य नहीं है ( docs.angularjs.org/guide/dev_guide.mvc.understanding_controller ), और उस अनुभाग में कोई प्रतिस्थापन प्रतीत नहीं होता है।

— प्रति क्वेस्ट एरॉनसन

सं। कोणीय (डाक्यूमेंट .querySelector ('# id')) का विकल्प है: $ ('# id'), इसके लिए नहीं: elementArray.find ('# id')

— नोएल

सही - लेकिन जैसा कि हमने पाया है कि हम अपने आवेदन के नए भागों को कोणीय में बनाते हैं, हमें कभी-कभी उस पर पुराने भागों को "डक्ट टेप" करने की आवश्यकता होती है, जब तक कि उन्हें अपडेट या फिर से फैक्टर नहीं किया जा सकता। हमारे मामले में हमें मौजूदा गड़बड़ी को संशोधित किए बिना कुछ पुराने jquery / ajax डेटा को लोड करने की आवश्यकता थी, इसलिए हमने निम्नलिखित काम किए- $ http.get ('/ Task / GetTaskStatsByTaskId /' + taskId) .success (फ़ंक्शन (डेटा) {angular.element। (document.querySelector ('# userTasksContainer'))। html (डेटा (})});

— केएन

अगर हाथी एक jqlite वस्तु है तो यह होगाangular.element(elem[0].querySelector('.classname'));

— cleversprocket

angualr jqlite नामक jquery के लाइटर संस्करण का उपयोग करता है जिसका अर्थ है कि इसमें jQuery की सभी विशेषताएँ नहीं हैं। यहाँ आप को jquery से क्या उपयोग कर सकते हैं इसके बारे में angularjs डॉक्स में एक संदर्भ है। कोणीय तत्व डॉक्स

आपके मामले में आपको आईडी या वर्ग नाम के साथ एक div खोजने की आवश्यकता है। वर्ग नाम के लिए आप उपयोग कर सकते हैं

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 के रूप में लचीला नहीं है लेकिन क्या है

— हननाद रहमान
स्रोत

यदि elem.find()आपके लिए काम नहीं कर रहा है, तो जांचें कि आप कोणीय स्क्रिप्ट से पहले JQuery स्क्रिप्ट शामिल कर रहे हैं ...।

— ancajic
स्रोत

हालांकि ओपी ने विशेष रूप से jQuery के बारे में पूछा, jQuery का उपयोग करने वालों और कक्षाओं और आईडी के साथ काम करने की अपेक्षा () खोजने के लिए और साथ ही यह उत्तर निश्चित रूप से मदद कर सकता है।

— मैट बी

यह स्पष्ट करने के लिए: "यदि jQuery उपलब्ध है, तो angular.element jQuery फ़ंक्शन के लिए एक उपनाम है। यदि jQuery उपलब्ध नहीं है, तो angular.element, Angular के बिल्ट-इन सबटाइटल को दर्शाता है, जिसे" JQuery लाइट "या jqLite कहा जाता है।" : से उद्धरण docs.angularjs.org/api/ng/function/angular.element । jqLite में ढूँढें () हैं।

— Kmaczek