JQuery .each () पीछे की ओर


442

मैं एक पृष्ठ पर कुछ तत्वों का चयन करने के लिए JQuery का उपयोग कर रहा हूं और फिर उन्हें DOM में घुमाऊंगा। समस्या यह है कि मुझे रिवर्स ऑर्डर में उन सभी तत्वों का चयन करने की आवश्यकता है जो JQuery स्वाभाविक रूप से उनका चयन करना चाहता है। उदाहरण के लिए:

<ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
   <li>Item 5</li>
</ul>

मैं सभी ली वस्तुओं का चयन करना चाहता हूं और उन पर .each () कमांड का उपयोग करना चाहता हूं, लेकिन मैं आइटम 5 से शुरू करना चाहता हूं, फिर आइटम 4 आदि क्या यह संभव है?

जवाबों:


681
$($("li").get().reverse()).each(function() { /* ... */ });

10
यह ध्यान रखना महत्वपूर्ण है कि सूचकांक उलटा नहीं है, इसलिए यदि आप केवल अंतिम तीन करना चाहते हैं, उदाहरण के लिए, आप <li>Item 5</li>
पाथफाइंडर

8
डेविड एंड्रेस के लिए: क्या आप ली से पहले अतिरिक्त $ () जोड़ना भूल सकते हैं। मैंने यह गलती की और "अपरिभाषित दुर्गंध" प्राप्त की।
मिशाल - 11:19 बजे वेरेडा-नेट

2
@DavidAndres: आपने याद किया .get()जो jQuery के लिपटे सरणी को साधारण JS सरणी में बदल देता है। जेएस सरणी है .reverse()
स्टैक्यूलर

1
सावधानी: Array.reverse()दोनों जगह में सरणी को संशोधित करता है और उलटा सरणी देता है। तो यह समाधान वास्तव में $ () मिलता है। () एक नया सरणी लौटाता है, और कुछ आंतरिक jQuery या DOM सरणी का संदर्भ नहीं है। संभवतः इस उदाहरण की सीमाओं के भीतर एक सुरक्षित शर्त। कैविट कोडर।
स्टीवन में बॉब स्टीन

404

मैं आपको दुनिया के सबसे छोटे jquery प्लगइन के रूप में सबसे साफ तरीके से पेश करता हूं:

jQuery.fn.reverse = [].reverse;

उपयोग:

$('jquery-selectors-go-here').reverse().each(function () {
    //business as usual goes here
});

माइकल जौरी को अपनी पोस्ट में यहां क्रेडिट दें: http://www.mail-archive.com/discuss@jquery.com/msg002626.html


ठीक है, मैं मानता हूं कि यह अच्छा है, लेकिन यह काम क्यों करता है? आप कॉपी कर रहे हैं (शिथिल रूप से बोल रहे हैं) Array.prototype.reverse से jQuery.prototype.reverse, और जब इसे कॉल किया thisजाता है तो इसमें संख्यात्मक गुण और एक लंबी संपत्ति होती है, इसलिए जावास्क्रिप्ट इसे अनुक्रमित कर सकता है और एक jQuery उदाहरण के लिए एक सरणी फ़ंक्शन लागू कर सकता है?
20

5
यह ध्यान रखना महत्वपूर्ण है कि सूचकांक उलटा नहीं है, इसलिए यदि आप केवल अंतिम तीन करना चाहते हैं, उदाहरण के लिए, आप <li>Item 5</li>
पाथफाइंडर

1
@ मैथ्यू - हां, आप इसे सही समझ रहे हैं। यह कोड वास्तव में ओवर के संदर्भ को कॉपी करता Array.prototype.reverseहै jQuery.prototype.reverse। जावास्क्रिप्ट सरणी के कई तरीके किसी भी ऑब्जेक्ट पर ठीक काम करेंगे, जो एक सरणी की तरह पर्याप्त दिखता है - यही कारण है कि ऑब्जेक्ट में .lengthऔर संख्यात्मक सूचकांक गुण हैं। reverseसरणी के कुछ आंतरिक प्रतिनिधित्व पर निर्भर नहीं करता है; यह सरणी सामान्य का उपयोग कर पहुँचता .length, [0], [1]बस सरणी कोड आप अपने आप को लिखते हैं की तरह आदि।
माइकल गेरी

8
क्या सिर्फ अपना reverseतरीका हासिल करने के लिए किसी नए ऐरे को तत्काल करना बेकार नहीं है ? क्या यह केवल फ़ंक्शन के संदर्भ में कॉपी करने के लिए तेज़ नहीं होगा Array.prototype.reverse, उदा jQuery.fn.reverse = Array.prototype.reverse;? कम और "चतुर" के रूप में नहीं, लेकिन अधिक कुशल? निश्चित रूप से यह शायद आज के बिजली के तेज ब्राउज़रों में ध्यान देने योग्य नहीं है, लेकिन फिर भी ...
zachelrath

3
@zachelrath हाँ, मैं अब और परिणामों के बीच किसी भी प्रकार का अलगाव नहीं कर सकता। ऐसा लगता है कि 20% सिर्फ एक अस्थायी था। याद रखें, आप केवल एक बार फ़ंक्शन सेट कर रहे हैं, इसलिए इंस्टेंटेशन केवल एक बार होता है, वहीं से फ़ंक्शन सेट होता है।
सैंडी गिफर्ड

64

तुम कर सकते हो

jQuery.fn.reverse = function() {
    return this.pushStack(this.get().reverse(), arguments);
}; 

के बाद

$(selector).reverse().each(...) 

14
यह दृष्टिकोण मूल रूप से जॉन रेजिग (jQuery डेवलपर) द्वारा jQuery मेलिंग सूची पर प्रस्तावित किया गया था ।
क्रिस शट्स

20

इसके लिए यहां अलग-अलग विकल्प दिए गए हैं:

पहला : बिना jQuery के:

var lis = document.querySelectorAll('ul > li');
var contents = [].map.call(lis, function (li) {
    return li.innerHTML;
}).reverse().forEach(function (content, i) {
    lis[i].innerHTML = content;
});

यहां डेमो करें

... और jQuery के साथ:

आप इसका उपयोग कर सकते हैं:

$($("ul > li").get().reverse()).each(function (i) {
    $(this).text( 'Item ' + (++i));
});

यहां डेमो करें

दूसरा तरीका, रिवर्स के साथ jQuery का उपयोग करना है:

$.fn.reverse = [].reverse;
$("ul > li").reverse().each(function (i) {
    $(this).text( 'Item ' + (++i));
});

यह डेमो यहाँ

एक और विकल्प यह है कि length(चयनकर्ता से मेल खाने वाले तत्वों की गिनती) का उपयोग करें indexऔर प्रत्येक पुनरावृत्ति का उपयोग करके वहां से नीचे जाएं । तब आप इसका उपयोग कर सकते हैं:

var $li = $("ul > li");
$li.each(function (i) {
    $(this).text( 'Item ' + ($li.length - i));
});

यह डेमो यहाँ

एक और , ऊपर वाले से संबंधित एक प्रकार:

var $li = $("ul > li");
$li.text(function (i) {
    return 'Item ' + ($li.length - i);
});

यहां डेमो करें


14

मैं एक रिवर्स प्लग-इन उदाहरण बनाना पसंद करता हूं

jQuery.fn.reverse = function(fn) {       
   var i = this.length;

   while(i--) {
       fn.call(this[i], i, this[i])
   }
};

उपयोग उदाहरण:

$('#product-panel > div').reverse(function(i, e) {
    alert(i);
    alert(e);
});

मुझे यह विचार / कोड भी पसंद है, लेकिन यह उच्च-मत वाले उत्तरों की तरह एक चेनेबल ऑब्जेक्ट (जो उलट) नहीं है :) फिर भी, निश्चित रूप से इसे सेटअप करने के तरीके के लिए एक अच्छा तरीका है
इयान

तुम सही हो। नहीं श्रृंखला योग्य तो एक वैध प्लगइन नहीं। हालांकि कोड में थोड़ा सुधार हुआ है, जो डिक्रीमर को कंडीशन में ले जा रहा है।
जेम्स वेस्टगेट


5

$ .Each पर रिवर्स करने की आवश्यकता है, इसलिए मैंने विनय विचार का उपयोग किया:

//jQuery.each(collection, callback) =>
$.each($(collection).get().reverse(), callback func() {});

अच्छी तरह से काम किया, धन्यवाद


यह सही नहीं है; यह सिर्फ होना चाहिए $.each(collection.reverse(), ...)
सोफी एल्पर्ट

@ बैन अल्परट - आपकी टिप्पणी त्रुटिपूर्ण है, क्योंकि संग्रह एक सही सरणी नहीं है
vsync

4

आप प्रत्येक कार्य jQuery के साथ पीछे की ओर पुनरावृति नहीं कर सकते, लेकिन आप अभी भी jQuery वाक्यविन्यास का लाभ उठा सकते हैं।

निम्नलिखित आज़माएँ:

//get an array of the matching DOM elements   
var liItems = $("ul#myUL li").get();

//iterate through this array in reverse order    
for(var i = liItems.length - 1; i >= 0; --i)
{
  //do Something
}

2

मुझे Array.prototype.reverseवस्तुओं के साथ असफल पाया गया , इसलिए मैंने विकल्प के रूप में उपयोग करने के लिए एक नया jQuery फ़ंक्शन बनाया jQuery.eachBack():। यह सामान्य के माध्यम से पुनरावृत्ति करता है jQuery.each(), और प्रत्येक कुंजी को एक सरणी में संग्रहीत करता है। यह फिर उस सरणी को उलट देता है और उलटी हुई कुंजियों के क्रम में मूल सरणी / ऑब्जेक्ट पर कॉलबैक करता है।

jQuery.eachBack=function (obj, callback) {
    var revKeys=[]; $.each(obj,function(rind,rval){revKeys.push(rind);}); 
    revKeys.reverse();
    $.each(revKeys,function (kind,i){
        if(callback.call(obj[i], i, obj[i]) === false) {    return false;}
    });
    return obj;
}   
jQuery.fn.eachBack=function (callback,args) {
    return jQuery.eachBack(this, callback, args);
}

-2

मुझे लगता है कि आपको चाहिए

.parentsUntill()

1
आप ऐसा क्यों सोचते हैं? और आप इसका उपयोग कैसे करेंगे?
बरगी

-2

आप भी आजमा सकते हैं

var arr = [].reverse.call($('li'))
arr.each(function(){ ... })
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.