JQuery चयनकर्ता से DOM तत्व कैसे प्राप्त करें

179

मैं एक कठिन चयनकर्ता के चयन से वास्तविक पहचान प्राप्त करने के लिए कठिन समय पा रहा हूं। नमूना कोड:

<input type="checkbox" id="bob" />
  var checkbox = $("#bob").click(function() { //some code  } )

और कोड के एक और टुकड़े में मैं चेकबॉक्स के चेक किए गए मूल्य को निर्धारित करने की कोशिश कर रहा हूं।

  if ( checkbox.eq(0).SomeMethodToGetARealDomElement().checked )
    //do something.

और कृपया, मैं नहीं करना चाहता:

  if ( checkbox.eq(0).is(":checked"))
    //do something

मुझे चेकबॉक्स के आसपास मिलता है, लेकिन दूसरी बार मुझे असली डोलमेंट की आवश्यकता है।

javascript jquery dom

— BillRob
स्रोत

4

एक केस जिसमें इसकी जरूरत पड़ सकती है: नॉकआउट में। फ़ंक्शन को applyBindingsउम्मीद है कि डोम नोड एक jQuery चयनकर्ता नहीं है। यह प्रश्न (और इसके उत्तर) वास्तव में वही है जिसकी आवश्यकता है।

— मुहम्मद अल्करौरी

264

आप कच्चे DOM तत्व के साथ पहुँच सकते हैं:

$("table").get(0);

या अधिक बस:

$("table")[0];

हालांकि, वास्तव में इसके लिए (मेरे अनुभव में) आपकी बहुत जरूरत नहीं है। अपना चेकबॉक्स उदाहरण लें:

$(":checkbox").click(function() {
  if ($(this).is(":checked")) {
    // do stuff
  }
});

अधिक "jquery'ish" और (imho) अधिक संक्षिप्त है। क्या होगा अगर आप उन्हें नंबर देना चाहते हैं?

$(":checkbox").each(function(i, elem) {
  $(elem).data("index", i);
});
$(":checkbox").click(function() {
  if ($(this).is(":checked") && $(this).data("index") == 0) {
    // do stuff
  }
});

इनमें से कुछ फीचर्स ब्राउजर्स में मास्क अंतर को भी मदद करते हैं। कुछ विशेषताएँ अलग हो सकती हैं। क्लासिक उदाहरण AJAX कॉल है। कच्चे जावास्क्रिप्ट में इसे ठीक से करने के लिए लगभग 7 कमबैक मामले हैं XmlHttpRequest।

— cletus
स्रोत

1

धन्यवाद, लेकिन प्राप्त विधि अभी भी एक jquery तत्व देता है, डोम तत्व नहीं। अन्यथा .checked प्रॉपर्टी कॉल ने काम किया होता।

— बिलरॉब

$('a').get(0).nodeType==1इस पृष्ठ पर Firebug में प्रयास करें , क्या यह सही या असफल का मूल्यांकन करता है?

— मेड ऑमरुराइवल

@BillRob अगर मिलता है () DOM एलिमेंट वापस नहीं कर रहा है, तो कुछ गलत है। यहां डॉक्स देखें: docs.jquery.com/Core/get#index

— ओटो

$('<input type=checkbox>').appendTo('body').get(0).checked

— मध्याह्न 2

5

यदि आप DOM प्रॉपर्टीज़ का स्पष्ट रूप से उपयोग करने जा रहे हैं तो jQuery का उपयोग करने का क्या मतलब है? क्या यह बेहतर नहीं होना चाहिए कि लगातार कोड टाइप करें जो कि संभावित टाइपरियर्स के खिलाफ त्रुटि-सबूत है? कुछ साल पहले मैं एक अभिजात वर्ग ECMAScripter हुआ करता था और फ्रेमवर्क से बचता था, लेकिन जितना अधिक मैंने असंगतियों के बारे में सीखा, मैंने अधिक भरोसा करना समाप्त कर दिया। ब्राउज़र इंजन केवल तेज़ और तेज़ हो रहे हैं, जब तक कि गति ध्यान देने योग्य नहीं है, तब तक आपको वास्तव में इस बारे में चिंता नहीं करनी चाहिए। एक फ्रेमवर्क का उपयोग करने के पूरे बिंदु में कई मुद्दों को हल करने के लिए काम करने योग्य सुसंगत कोड होना है, जितना जल्दी हो सके सामान नहीं करना।

— 17

7

संपादित करें: ऐसा लगता है कि मैं यह मानने में गलत था कि आप तत्व प्राप्त नहीं कर सकते। जैसा कि अन्य लोगों ने यहां पोस्ट किया है, आप इसे यहां प्राप्त कर सकते हैं:

$('#element').get(0);

मैंने सत्यापित किया है कि वास्तव में DOM तत्व का मिलान किया गया है।

— eduncan911
स्रोत

2

खुद को दोहरा रहा है, लेकिन फिर से ... सभी ब्राउज़रों में नहीं। IE7 और पूर्व में विफल।

— स्लाव

6

मुझे एक स्ट्रिंग के रूप में तत्व प्राप्त करने की आवश्यकता थी।

jQuery("#bob").get(0).outerHTML;

जो आपको कुछ इस तरह देगा:

<input type="text" id="bob" value="hello world" />

... एक DOM तत्व के बजाय एक स्ट्रिंग के रूप में।

— चाड हेजकॉक
स्रोत

1

यदि आपको DOM तत्व के साथ सीधे इंटरेक्ट करने की आवश्यकता है document.getElementById, तो अभी से उपयोग क्यों न करें , यदि आप किसी विशिष्ट तत्व के साथ इंटरैक्ट करने की कोशिश कर रहे हैं, तो संभवतः आपको आईडी पता होगा, क्योंकि यह मानते हुए कि क्लासनाम केवल एक तत्व पर है या कोई अन्य विकल्प है। जोखिम भरा हो।

लेकिन, मैं दूसरों के साथ सहमत हूं, कि ज्यादातर मामलों में आपको वह करना सीखना चाहिए जो आपको उपयोग करना चाहिए जो jQuery आपको देता है, क्योंकि यह बहुत लचीला है।

अद्यतन: एक टिप्पणी पर आधारित: यहाँ एक अच्छी व्याख्या के साथ एक पोस्ट है: http://www.mail-archive.com/jquery-en@googlegroups.com/msg04461.html

$(this).attr("checked") ? $(this).val() : 0

यह जाँचने पर मान लौटा देगा, या यदि यह नहीं है तो 0।

$(this).val() बस डोम में पहुंच रहा है और तत्व की विशेषता "मान" प्राप्त कर रहा है, चाहे वह चेक किया गया हो या नहीं।

— जेम्स ब्लैक
स्रोत

2

मैं document.getElementById या MS ajax $ get विधि का उपयोग कर सकता था। चूंकि एमएस ने jquery का समर्थन किया है, मैं ms ajax जावास्क्रिप्ट पर अपनी निर्भरता को तोड़ने और jquery सीखने की कोशिश कर रहा हूं। यह पूरी तरह से काउंटर-सहज ज्ञान युक्त लगता है कि jquery चेकबॉक्स के व्यवहार को बदल देगा। () विधि। हर दूसरे .val () कॉल के रूप में फॉर्म पोस्ट फील्ड रिटर्न करता है। jQuery के साथ काम करने के लिए बहुत अच्छा रहा है इसलिए यह घाटी () विधि को बदलने के लिए भ्रमित था और एक त्वरित समाधान खोजने की उम्मीद कर रहा था।

— बिलरॉब

2

तो इस पृष्ठ को देखें: mail-archive.com/jquery-en@googlegroups.com/msg04461.html

— जेम्स ब्लैक

2

यह अजीब जेम्स है कि वैल () विधि वास्तव में है .attr ("मूल्य")। मुझे आश्चर्य है कि उनके पास इसके लिए दो अलग-अलग तरीके क्यों हैं। मेरे लिए .val () फॉर्म पोस्ट फील्ड का मान है।

— बिलरॉब

2

@BillRob - jQuery सिर्फ सरलीकृत है, और मानकीकरण कर रहा है, आप वास्तविक तत्व पर जाने के बजाय मूल्य प्राप्त करने के लिए कैसे करें और इसे स्वयं करें।

— जेम्स ब्लैक

कभी-कभी आपको आईडी और माता-पिता के बच्चे के परिदृश्य के साथ एक जटिल चयनकर्ता की आवश्यकता होती है और आप इसे कोड की एक पंक्ति के साथ jQuery के माध्यम से प्राप्त कर सकते हैं, लेकिन दस्तावेज़ का उपयोग करने के लिए एक दिन लगेगा ।getElementById। मैं मानता हूं कि पुस्तकालयों को मिलाना एक बुरा विचार है, लेकिन यह कभी-कभी होता है और एक jquery वस्तु से DOM तत्व प्राप्त करने का कार्य मुश्किल है, विशेष रूप से .get (0) के साथ ब्राउज़र संगतता नहीं होना।

— स्लाव