জেকুয়েরি filter() মেথড
« জেকুয়েরি ট্রাভার্সিং মেথডসমূহ
সংজ্ঞা এবং ব্যবহার
filter() মেথড ঐ এলিমেন্টটিকে রিটার্ন করে, যেটি একটি নির্দিষ্ট মানদন্ডের সাথে মিল করে।
এই মেথডে আপনাকে কিছু মানদন্ড নির্দিষ্ট করার সুযোগ দেয়। যেসকল এলিমেন্টের সাথে মানদন্ড মিলবে না সেগুলো এলিমেন্ট নির্বাচন থেকে বাদ পড়বে এবং যেগুলোর সাথে মিলবে সেগুলো রিটার্ন করবে।
নির্বাচিত এলিমেন্টের গ্রুপ থেকে সার্চকে আরো তীক্ষ্ণ করার জন্য প্রায়ই ব্যবহৃত হয়।
টিপস:filter() মেথডটি not() মেথডের বিপরীত।
সিনট্যাক্স ও ব্যাখ্যা
$(selector).detach()$(selector).filter(criteria,function(index))
প্যারামিটার ও তাদের ভ্যালু
প্যারামিটার ও তাদের ভ্যালু
নিচের টেবিলে filter() মেথডে ব্যবহৃত প্যারামিটার এবং প্যারামিটারের সম্ভাব্য ভ্যালু গুলো দেখানো হলোঃ
| প্যারামিটার | বিবরণ |
|---|---|
| criteria | ঐচ্ছিক। নির্বাচিত এলিমেন্টের গ্রুপ থেকে সিলেক্টর এক্সপ্রেশন, একটি জেকুয়েরি অবজেক্ট অথবা এক বা তার অধিক এলিমেন্ট রিটার্নকে নির্দেশ করে। টিপস: একের অধিক মানদন্ড নির্দারন করার জন্য কমা(,) ব্যবহার করুন। |
| function(index) | ঐচ্ছিক। সেটের প্রত্যেক এলিমেন্টে রান করার জন্য একটি ফাংশনকে নির্দেশ করে। যদি এটি রিটার্ন করে, তাহলে এলিমেন্টটি আছে, অন্যথায় এলিমেন্টটি রিমুভ হয়েছে।
|
filter()মেথড সংক্রান্ত উদাহরণ
নিচের উদাহরনে "intro" ক্লাসযুক্ত সকল <p> এলিমেন্টকে রিটার্ন করেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরির উদাহরণ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").filter(".intro").css("background-color", "lightblue");
});
</script>
</head>
<body>
<h3>আমাদের হোমপেইজে আপনাকে স্বাগতম!!!</h3>
<p>আমার নাম ইমরান</p>
<p class="intro">আমি চাঁদপুরে থাকি।</p>
<p class="intro">আমি চাঁদপুর ভালবাসি।</p>
<p>আমার ঘনিষ্ঠ বন্ধুর নাম মুন্না।</p>
</body>
</html>
ফলাফল
সকল <p> এলিমেন্ট রিটার্ন, যেগুলো জোড়
নিচের উদাহরনে filter() মেথডের সাথে :even সিলেক্টর ব্যবহার করে যেগুলো সেসকল <p> এলিমেন্টকে রিটার্ন করে
উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরির উদাহরণ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").filter(":even").css("background-color", "aqua");
});
</script>
</head>
<body>
<p>আমি জিহাদ (index 0)।</p>
<p>আমি চাঁদপুর বাস করি (index 1)।</p>
<p>চাঁদপুর চট্টগ্রাম বিভাগে অবস্থিত (index 2)।</p>
<p>আমি রায়হান (index 3)।</p>
<p>আমি বাগেরহাট বাস করি (index 4)।</p>
<p>বাগেরহাট খুলনা বিভাগে অবস্থিত (index 5)।</p>
</body>
</html>
ফলাফল
একাধিক মানদন্ড
কিভাবে "intro" এবং id "outro" যুক্ত সকল p এলিমেন্টকে কিভাবে রিটার্ন করা যায় তা নিচের উদাহরনে দেখানো হলো
উদাহরণঃ১
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরির উদাহরণ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").filter(".intro,#outro").css("background-color", "aqua");
});
</script>
</head>
<body>
<h1>স্যাট একাডেমিতে আপনাকে স্বাগতম</h1>
<p>আমি রেদওয়ানুল সিদ্দিকি</p>
<p class="intro">আমি রাজশাহী বাস করি</p>
<p id="outro">আমি গুগল পছন্দ করি</p>
<p>আমার বড় ভাই এর নাম তামিম,</p>
</body>
</html>
ফলাফল
DOM
DOM এলিমেন্টের মাধ্যমে কিভাবে "intro" যুক্ত <p> এলিমেন্টকে রিটার্ন কর যা তা নিচের উদাহরনে দেখানো হলো
উদাহরণঃ২
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরির উদাহরণ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").filter(document.getElementById("intro")).css("background-color", "aqua");
});
</script>
</head>
<body>
<h1>স্যাট একাডেমিতে স্বাগতম</h1>
<p>আমি তামিম</p>
<p id="outro">আমি পিপিলিকা পছন্দ করি</p>
<p>আমার ছোট ভাই এর নাম তাহমিদ,</p>
</body>
</html>
ফলাফল
ফাংশন ব্যবহার করে
যেসকল <p> এলিমেন্টের মধ্যে দুটি <span> এলিমেন্ট রয়েছে, সেগুলোকে কিভাবে ফাংশনের মাধ্যম রিটার্ন করা যায় তা নিচের উদাহরনে দেখানো হলো।
উদাহরণঃ৩
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরির উদাহরণ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").filter(function(){
return $("span", this).length == 2;}).css("background-color", "aqua");
});
</script>
</head>
<body>
<div>
<p>একটি span এলিমেন্টসহ<span>p এলিমেন্ট। </span></p>
<p>দুইটি span এলিমেন্ট <span>সহকারে</span>দুইটি<span>p এলিমেন্ট।</span></p>
<p>একটি span এলিমেন্টসহ<span>p এলিমেন্ট।</span></p>
<p>দুইটি span এলিমেন্ট<span>সহকারে</span> একটি <span>p এলিমেন্ট।</span></p>
<p>span এলিমেন্ট ছাড়াই p এলিমেন্ট।</p>
</div>
<p>এই উদাহরণে সব p এলিমেন্টে দুটি স্প্যান এলিমেন্ট রয়েছে। p এলিমেন্টে খালি,একটা, অথবা দুইয়ের বেশি স্পেন(span) এলিমেন্টকে রিটার্ন করবে না।</p>
</body>
</html>
ফলাফল
« জেকুয়েরি ট্রাভার্সিং মেথডসমূহ