JQuery .each () পিছনে


442

আমি কোনও পৃষ্ঠায় কিছু উপাদান নির্বাচন করতে এবং তারপরে এটিকে ডম-এ প্রায় সরানোর জন্য 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>0 এর সূচক আশা করতে পারবেন না
পাথফাইন্ডার

8
ডেভিড অ্যান্ড্রেসের সাথে: আপনি কি লি এর আগে অতিরিক্ত $ () যুক্ত করতে ভুলে যেতে পারেন। আমি এই ভুলটি করেছিলাম এবং "অপরিবর্তিত ফানক" পেয়েছি।
মিশাল - ওয়েলডা-নেট

2
@ ডেভিডএন্ড্রেস: আপনি মিস করেছেন .get()যা jQuery মোড়ানো অ্যারেটিকে একটি সাধারণ জেএস অ্যারে রূপান্তরিত করে। জেএস অ্যারে আছে .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/msg04261.html


ঠিক আছে, আমি সম্মত হলাম এটি দুর্দান্ত, তবে এটি কেন কাজ করে? আপনি অ্যারি.প্রোটোটাইপ.রেভারকে jQuery.prototype.reverse অনুলিপি করছেন, এবং যখন এটি কল করা হবে তখন thisবস্তুর সংখ্যাসূচক বৈশিষ্ট্য এবং একটি দৈর্ঘ্যের সম্পত্তি রয়েছে, তাই জাভাস্ক্রিপ্ট এটিকে সূচি দিতে পারে এবং jQuery উদাহরণে একটি অ্যারে ফাংশন প্রয়োগ করতে পারে?
mlhDev

5
সূচকটি বিপরীত নয় এমনটি গুরুত্বপূর্ণ হওয়া উচিত, সুতরাং আপনি যদি কেবল শেষ তিনটি করতে চান তবে উদাহরণস্বরূপ, আপনি <li>Item 5</li>0 এর সূচক আশা করতে পারবেন না
পাথফাইন্ডার

1
@ ম্যাথিউ - হ্যাঁ, আপনি এটা ঠিক বুঝতে পেরেছেন। যে কোড একটি কপি প্রকৃতপক্ষে নেই রেফারেন্স করার Array.prototype.reverseউপর jQuery.prototype.reverse। জাভাস্ক্রিপ্ট অ্যারে পদ্ধতিগুলির অনেকগুলি কোনও অ্যারের মতো যথেষ্ট দেখায় এমন কোনও বস্তুর উপর সূক্ষ্মভাবে কাজ করবে - এটি যদি বস্তুর .lengthএবং সংখ্যাগত সূচক বৈশিষ্ট্যগুলি থাকে। reverseঅ্যারের কিছু অভ্যন্তরীণ উপস্থাপনার উপর নির্ভর করে না; এটা অ্যারের স্বাভাবিক ব্যবহার ব্যবহারের .length, [0], [1]শুধু অ্যারে কোড আপনি নিজেকে লিখতে চাই মত ইত্যাদি।
মাইকেল জেরি

8
কোনও নতুন অ্যারে কেবল তার reverseপদ্ধতিটি অর্জন করার জন্য তা ইনস্ট্যান্ট করা কি অপচয় নয় ? এটি দ্রুত হবে না ফাংশন একটি রেফারেন্স সময় অনুলিপি শুধু Array.prototype.reverse, যেমন jQuery.fn.reverse = Array.prototype.reverse;? সংক্ষিপ্ত এবং "চালাক" নয়, তবে আরও দক্ষ? স্বীকার করা যায় এটি সম্ভবত আজকের বিদ্যুৎ-দ্রুত ব্রাউজারগুলিতে অলক্ষিত হতে পারে তবে তবুও ...
জাচেলরথ

3
@ জ্যাচেলারথ হ্যাঁ, ফলাফলের মধ্যে আমি আর কোনও ধরণের বিচ্ছেদ পেতে পারি না। দেখে মনে হচ্ছে যে 20% কেবল একটি ফ্লুক ছিল। মনে রাখবেন, আপনি কেবল একবার ফাংশনটি সেট করছেন, সুতরাং ইনস্ট্যান্টেশনটি কেবল একবার ঘটবে, সেখান থেকে ফাংশনটি সেট করা আছে।
স্যান্ডি গিফোর্ড


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

বিপরীত করার দরকার $ .এইচ তাই আমি বিনয়ের ধারণাটি ব্যবহার করেছি:

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

ধন্যবাদ সুন্দরভাবে


এটা ঠিক নয়; এটা ঠিক হওয়া উচিত $.each(collection.reverse(), ...)
সোফি আল্পার্ট


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(){ ... })
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.