2012-07-31 17 views
11

http://api.jquery.com/category/selectors/ के अनुसार हम jQuery में बड़ी संख्या में सीएसएस चयनकर्ताओं का उपयोग कर सकते हैं, लेकिन उदा। :nth-last-child() का उल्लेख नहीं किया गया है। हालांकि, जब मैं परीक्षण निम्नलिखित (jQuery 1.7.1 के साथ गूगल से) के रूप में, यह वास्तव में, लेकिन नहीं आईई 9 पर IE 8 अनुकरण मोड में फ़ायरफ़ॉक्स, क्रोम, और IE 9 पर काम करता है:क्या jQuery चयनकर्ता jQuery वास्तव में समर्थन करता है, उदा। : N वें-आखिरी बच्चा()?

$('li:nth-last-child(2)').css('color', 'red'); 

तो क्या है हो रहा? ऐसा लगता है जैसे jQuery ने सीएसएस कोड उत्पन्न किया, जैसे li:nth-last-child(2) { color: red } और किसी भी तरह से इंजेक्शन दिया गया, जो तब चयनित चयनकर्ता का समर्थन करने वाले ब्राउज़र पर ठीक काम करता है। लेकिन यह अजीब होगा।

सबसे महत्वपूर्ण बात यह है कि jQuery के सभी ब्राउज़रों पर ऐसे चयनकर्ताओं को समर्थन देने के लिए कुछ चाल है?

उत्तर

34

जबकि jQuery मानक home page पर अनुपालन करता है, यह spec को पूरी तरह कार्यान्वित नहीं करता है। अपने Selectors दस्तावेज में, यह स्पष्ट करता है कि यह "[borrows] सीएसएस 1-3 से है, और उसके बाद [अपने] चयनकर्ताओं को जोड़ता है।

jQuery 1.9 से शुरू, लगभग स्तर 3 मानक में सभी चयनकर्ताओं Sizzle (उसके अंतर्निहित चयनकर्ता पुस्तकालय) द्वारा निम्नलिखित अपवादों के साथ समर्थित हैं:

  • किसी भी छद्म तत्वों

    jQuery चयन नहीं कर सकते they are CSS-based abstractions of the document tree that can't be expressed through the DOM के रूप में।

  • jQuery उपयोगकर्ता इंटरैक्शन के लिए हाइपरलिंक्स और :hover, :active and :focus के लिए :link/:visited जैसे गतिशील छद्म-वर्गों को हल करने में असमर्थ है। विशेष रूप से छद्म-वर्गों का बाद का सेट राज्य-आधारित और घटना-आधारित नहीं है, इसलिए आपको कोड चलाने के लिए छद्म-वर्गों के बजाय इवेंट हैंडलर का उपयोग करने की आवश्यकता होती है जब तत्व और इन राज्यों को छोड़ दें। स्पष्टीकरण के लिए this answer देखें।

  • jQuery namespace prefixes को हल करने में भी असमर्थ है क्योंकि यह namespacing in CSS का समर्थन नहीं करता है।

निम्नलिखित स्तर 3 चयनकर्ताओं are implemented in jQuery 1.9 and newer, लेकिन नहीं jQuery 1.8 या उससे अधिक :

इसके अतिरिक्त

:

  • :lang(), सीएसएस 2 में पेश किया, यह भी याद आ रही है।

कारण है कि अपने चयनकर्ता फ़ायरफ़ॉक्स में काम करने के लिए प्रकट होता है, क्रोम और IE9 क्योंकि jQuery पहले कड़ाके की धूप पर वापस गिरने से पहले देशी document.querySelectorAll() कार्यान्वयन के लिए चयनकर्ता स्ट्रिंग गुजरता है। चूंकि यह एक वैध सीएसएस चयनकर्ता है, document.querySelectorAll() jQuery के उपयोग के लिए सफलतापूर्वक नोड सूची लौटाएगा, जिससे सिज़ल के उपयोग को रोक दिया जा सकेगा।

यदि document.querySelectorAll() विफल रहता है, तो jQuery स्वचालित रूप से Sizzle पर वापस आ जाता है।

  • चयनकर्ता अमान्य, नहीं किया जा सकता समर्थित नहीं, या अन्यथा (विवरण के लिए Selectors API spec देखें): यह है कि यह विफल हो सकता है परिदृश्यों की एक संख्या हैं।

  • document.querySelectorAll() विधि ही समर्थित नहीं है (jQuery वास्तव में एक सरल के साथ इस परीक्षण बयान इसलिए यदि यह शब्द के उस अर्थ में असफल नहीं है, लेकिन आप चित्र प्राप्त)।

आपके मामले में, हालांकि IE9 और IE8 document.querySelectorAll() लागू, IE8 :nth-last-child() समर्थन नहीं करता। चूंकि jQuery/Sizzle :nth-last-child() को लागू नहीं करता है, इसलिए उपयोग करने के लिए कोई फॉलबैक व्यवहार नहीं है, जिसके परिणामस्वरूप IE8 पर पूर्ण विफलता है।

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


यह समर्थन :contains(), पिछले के साथ-साथ मानक से :not() विस्तार के रूप में बाद में गिरा दिया जा रहा है, इससे पहले कि this old CR revision of the spec में परिभाषित करता है। JQuery के कार्यान्वयन और वर्तमान मानक के बीच अंतर this question में शामिल हैं।

कुछ अन्य चयनकर्ताओं (+ और ~ भाई combinators, :empty, :lang() और कुछ सीएसएस 2 विशेषता चयनकर्ताओं की तरह), jQuery के प्रारंभिक विकास के दौरान साथ ही गिरा दिया जाना सिर्फ इसलिए कि John Resig didn't think anybody would use them जा रहे थे। कुछ और परीक्षण उपलब्ध कराने के बाद लगभग सभी ने इसे अंतिम रिलीज में बनाया। :lang() एकमात्र ऐसा था जिसने इसे ऊपर बताए अनुसार 1.9 से पहले कभी भी रिलीज़ नहीं किया था।

+1

बेशक, यह उल्लेख किया जाना चाहिए कि jQuery चयनकर्ताओं का उपयोग करके बढ़ाया जा सकता है: '$ .expr [':'] ['nth-last-child'] = function() {...};' – zzzzBov

+0

@ zzzzBov: अनुस्मारक के लिए धन्यवाद! मैंने उल्लेख किया है कि एक संपादन में, और अभी मैं अपने स्वयं के कार्यान्वयन के साथ आने की कोशिश कर रहा हूं ... – BoltClock

+0

@ बोल्टक्लॉक यह कहां है http://api.jquery.com/nth-of-type- चयनकर्ता/वह _it "[borrows] सीएसएस 1-3 से, और उसके बाद [add] अपने स्वयं के" selectors._ –

संबंधित मुद्दे