मेरे पास jQuery में कोड की कुछ पंक्तियां हैं:

     var central = $('#townid option:contains("Central")');
     if (central.length){
        central.insertAfter('select option:first-child');
     }

मैं सिर्फ जावास्क्रिप्ट के साथ JQuery लाइब्रेरी का उपयोग किए बिना इसे फिर से कैसे लिख सकता हूं?

3
kamaci 7 मार्च 2011, 15:10
5
यह तब होता है जब आप इस तरह की चीजें करने की कोशिश करते हैं कि आप वास्तव में jQuery की सराहना करते हैं ...
 – 
lonesomeday
7 मार्च 2011, 15:14

1 उत्तर

सबसे बढ़िया उत्तर

एक सही अनुवाद कुछ ऐसा होगा:

var selects = document.getElementsByTagName('select'),
    options = document.getElementById('townid').getElementsByTagName('option'),
    options = Array.prototype.slice.call(options), //2 lines only for readability
    tmp = document.createDocumentFragment();

for(var i = 0, l = options.length; i < l; i++) {
    var option = options[i],
        text = option.innerText || option.textContent;
    if(text.indexOf('Central') > -1) {
        tmp.appendChild(option);
    }
}

for(var i = 0, l = selects.length; i < l; i++) {
    var select = selects[i],
         opts = select.getElementsByTagName('option');
    if(opts.length > 1) {
        select.insertBefore(tmp.cloneNode(true), opts[1]);
    }
    else {
        select.appendChild(tmp.cloneNode(true));
    }
}

डेमो

इसे मार्कअप के आधार पर काफी सरल किया जा सकता है (और ब्राउज़र के आधार पर अनुकूलित किया जा सकता है (उदाहरण के लिए querySelectorAll के लिए समर्थन))। उदा. यदि आप जानते हैं कि हमेशा केवल एक विकल्प होगा जिसमें "केंद्रीय" होता है और क्या केवल एक select तत्व मौजूद है या नहीं।

यहां एक select तत्व, सूची का ज्ञात आकार (यानी> 1) और केवल एक विकल्प जिसमें Central शामिल है, के लिए एक स्ट्रिप्ड डाउन संस्करण दिया गया है। तो मूल रूप से केवल विकल्प को पुन: व्यवस्थित करना:

var options = document.getElementById('townid').getElementsByTagName('option');

for (var i = 0, l = options.length; i < l; i++) {
    var option = options[i],
        text = option.innerText || option.textContent;
    if (text.indexOf('Central') > -1) {
        if (i > 1) {
            option.parentNode.insertBefore(option, options[1]);
        }
        break;
    }
}

डेमो

अपडेट करें:

यदि विकल्प का टेक्स्ट बिल्कुल Central होना चाहिए, तो टेक्स्ट की सामान्य रूप से तुलना करें:

if(text === 'Central')
6
Felix Kling 7 मार्च 2011, 18:22
+1 मुझे कुछ नया सिखाने के लिए: कॉम/प्रश्न/2125714/…
 – 
mplungjan
7 मार्च 2011, 15:42
@mplungjan: :) यह आवश्यक था क्योंकि option को DocumentFragment में जोड़ने से इसे NodeList (जैसा कि यह लाइव है) से हटा देता है और लूप इंडेक्स के साथ गड़बड़ कर देता है।
 – 
Felix Kling
7 मार्च 2011, 15:44
मैंने सोचा था कि ऐसा इसलिए था क्योंकि आप डोम नोडलिस्ट को टुकड़ा नहीं कर सकते क्योंकि यह एक सरणी नहीं है ...
 – 
mplungjan
7 मार्च 2011, 15:49
यह सिंटैक्स मेरे लिए भी नया है: var option = options[i], text = option.innerText || option.textContent; या यह एक टाइपो है?
 – 
mplungjan
7 मार्च 2011, 15:51
@mplungjan: मैं केवल NodeList को एक सरणी में बदलने के लिए slice का उपयोग करता हूं। सरणी की सामग्री नहीं बदलती है, इससे कोई फर्क नहीं पड़ता कि मैं डीओएम में विकल्प कहां जोड़ता हूं, लेकिन नोडलिस्ट करता है। अगर मैं नोडलिस्ट पर पुनरावृति करता हूं, तो विकल्पों में से एक को दस्तावेज़फ्रैगमेंट में ले जाने के बाद, नोडलिस्ट में एक तत्व कम होता है और इसलिए पुनरावृत्ति गड़बड़ हो जाती है। यह उस पर लूप करते समय एक सरणी से तत्वों को हटाने जैसा है।
 – 
Felix Kling
7 मार्च 2011, 15:52