JQuery के बारे में सबसे रोमांचक चीजों में से एक इसका चयनकर्ता इंजन है। JQuery में चयनकर्ताओं का उपयोग करते हुए DOM तत्वों तक पहुँचना काफी सरल कार्य हो जाता है, क्योंकि अधिकांश चयनकर्ता CSS में चयनकर्ताओं के समान ही भावों का उपयोग करते हैं। यह कुछ ऐसा है जो वेब डिज़ाइनर नहीं प्रोग्रामर आसानी से सीख सकते हैं।

यह लेख एक मनमाना चयनकर्ता बनाने में एक अभ्यास है, आप इसे अपने स्वयं के चयनकर्ता बनाने के लिए एक गाइड के रूप में उपयोग कर सकते हैं।

मैं क्या हासिल करना चाहता था?

पहले, मुझे संग्रह में हर तीसरे आइटम को प्राप्त करने की आवश्यकता थी। (मैं हर तीसरे तत्व के लिए एक अलग शैली लागू करने जा रहा था)। मैंने इस समस्या को हल करने के लिए एक सरल स्क्रिप्ट लिखने की कोशिश की, लेकिन फिर मैंने सोचा कि यह चयनकर्ता के रूप में क्यों नहीं किया जा सकता है।

JQuery में "कस्टम" चयनकर्ताओं को बनाना इतना जटिल मामला नहीं है। इस विषय पर एक उत्कृष्ट लेख है ।

इसलिए, मेरा लक्ष्य एक निश्चित कदम के साथ तत्वों का चयन करना था, या कुछ मामलों में मुझे nth तत्व से चयन शुरू करने की आवश्यकता थी, और पहले से नहीं ...

यहाँ अंतिम कोड है:

jQuery.expr[ ':' ].step = function (node,index,meta){

var $index = index;

var $meta = meta[3].toString().split( ',' );

var $step = parseInt($meta[0]);

var $start = ($meta.length > 1) ? $meta[1] : 0;

if ($start != 0) $start -= 1;

return ( ( ($index-$start) / $step ) == Math.floor( ( ($index-$start) / $step ) ) && ( ($index-$start) >= 0 ) );

};

चलिए कदम से कदम मिलाकर चलते हैं

इस वेक्टर का उपयोग शुरू करने के लिए, हमें निश्चित रूप से jQuery और jquery.step.js फ़ाइल को शामिल करना चाहिए, जिसे यहां पाया और डाउनलोड किया जा सकता है ।

<script type= "text/javascript" src= "jquery.js" ></script>

<script type= "text/javascript" src= "jquery.step.js" ></script>

चरण चयनकर्ता तत्वों को लाने के लिए सामान्य jQuery विधि का उपयोग करता है। यहां हर तीसरे आइटम को लाने के लिए एक उदाहरण है।

$( 'ul#one li:step(3)' ).css( 'clear' , 'left' );

जैसा कि उल्लेख किया गया है, इस चयनकर्ता का उपयोग किसी विशिष्ट तत्व से चयन करने के लिए किया जा सकता है। मान लीजिए, यदि आप 5 वें से शुरू होने वाले प्रत्येक 3 तत्व का चयन करना चाहते हैं, तो यह कुछ इस तरह दिखाई देगा:

$( 'ul#two li:step(3,5)' ).addClass( 'alt' );

पहला पैरामीटर 3 चरण दिखाता है, और दूसरा पैरामीटर 5 नमूना का प्रारंभ बिंदु दिखाता है। पैरामीटर को अल्पविराम द्वारा अलग किया जाता है।

व्यावहारिक अनुप्रयोग

यदि आपके पास फ्लोट = बाईं ओर थंबनेल के साथ एक गैलरी है और आप हर 4 वें थंबनेल के चारों ओर लपेट को रीसेट करना चाहते हैं। या आप दृश्य समूहीकरण के लिए सूची के हर 10 वें तत्व के लिए एक विशेष वर्ग लागू करते हैं। या आप हर 5 समाचारों में विज्ञापन डाल सकते हैं, लेकिन पहले ... आदि से पहले नहीं।

महत्वपूर्ण नोट्स

कुछ समस्याएं हैं जिनका मैं हल नहीं कर सका। जब इसमें कक्षाएं होंगी तो मैं सही ढंग से काम करने के लिए चयनकर्ता नहीं ला सकता। इस चयनकर्ता के साथ कुछ समस्याएं हैं:

$( 'ul.one li:step(3)' ).css( 'clear' , 'left' );



यदि आपके पास कोई समाधान है - तो इसे साझा करें और हम सभी आपके आभारी रहेंगे।

एक अनुवादक से: उदाहरण सत्यापित हैं - सब कुछ काम करने लगता है जैसा कि यह होना चाहिए - लेखक को क्या समस्याएँ पूरी तरह से नहीं समझती हैं

टिप्पणियों से मूल तक:

JQuery में पहले से ही एक साधारण चयनकर्ता है:

api.jquery.com/nth-child-selector

यदि आपको इंडेंटेशन की आवश्यकता है, तो बस समानता + इंडेंटेशन में पेस्ट करें।



उत्तर: यह लेख एक मनमाना चयनकर्ता बनाने का एक उदाहरण मात्र है और इससे अधिक कुछ नहीं। आपका धन्यवाद