জেকুয়েরি ট্রাভার্সিং - ফিল্টার
সুনির্দিষ্ট এলিমেন্ট অনুসন্ধান
এইচটিএমএল এলিমেন্ট ফিল্টার করার জন্য জেকুয়েরির তিনটি মৌলিক মেথড হচ্ছে first(), last() এবং eq()। যাদের মাধ্যমে কোনো একটি এলিমেন্টের অবস্থানের উপর ভিত্তি করে অন্য এলিমেন্টকে খুঁজে বের করা যায়।
এছাড়া অন্যান্য ফিল্টারিং মেথড যেমন- filter() এবং not() কোনো মানদণ্ডের উপর ভিত্তিকরে তার সাথে ম্যাচ করা/না করা এলিমেন্টকে রিটার্ণ করে।
first() মেথড
first() মেথড নির্বাচিত এলিমেন্টের প্রথম এলিমেন্টকে রিটার্ণ করে।
নিচের উদাহরণে প্রথম <div> এলিমেন্টের মধ্যে অবস্থিত প্রথম <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(){
$("div p").first().css("background-color", "teal");
});
</script>
</head>
<body>
<p>এটি body এলিমেন্টের প্রথম প্যারাগ্রাফ।</p>
<div style="border: 1px solid red;">
<p>এটি div এলিমেন্টের প্রথম প্যারাগ্রাফ।</p>
<p>এটি div এলিমেন্টের শেষ প্যারাগ্রাফ।</p>
</div><br>
<div style="border: 1px solid red;">
<p>এটি অন্য একটি div এলিমেন্টের প্রথম প্যারাগ্রাফ।</p>
<p>এটি অন্য একটি div এলিমেন্টের শেষ প্যারাগ্রাফ।</p>
</div>
<p>এটি body এলিমেন্টের শেষ প্যারাগ্রাফ।</p>
</body>
</html>
ফলাফল
last() মেথড
last() মেথডের মাধ্যমে নির্বাচিত এলিমেন্টের শেষ এলিমেন্টকে ফেরত পাওয়া যায়।
নিচের উদাহরণে শেষ <div> এলিমেন্টের মধ্যে অবস্থিত শেষ <p> এলিমেন্টকে রিটার্ণ করেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরি উদাহরণ</title>
<script>
<script>
$(document).ready(function(){
$("div p").last().css("background-color", "teal");
});
</script>
</head>
<body>
<p>এটি body এলিমেন্টের প্রথম প্যারাগ্রাফ।</p>
<div style="border: 1px solid red;">
<p>এটি div এলিমেন্টের প্রথম প্যারাগ্রাফ।</p>
<p>এটি div এলিমেন্টের শেষ প্যারাগ্রাফ।</p>
</div><br>
<div style="border: 1px solid red;">
<p>এটি অন্য একটি div এলিমেন্টের প্রথম প্যারাগ্রাফ।</p>
<p>এটি অন্য একটি div এলিমেন্টের শেষ প্যারাগ্রাফ।</p>
</div>
<p>এটি body এলিমেন্টের শেষ প্যারাগ্রাফ।</p>
</body>
</html>
ফলাফল
eq() মেথড
eq() মেথডের মাধ্যমে নির্বাচিত এলিমেন্টের ইনডেক্স অনুসারে কাঙ্ক্ষিত এলিমেন্টকে ফেরত পাওয়া যায়।
ইনডেক্সিং শুরু হয় ০ দিয়ে অর্থাৎ প্রথম এলিমেন্টটি ১ এর পরিবর্তে ০( শূন্য) দিয়ে শুরু হয় দিয়ে।
নিচের উদাহরণে দ্বিতীয় <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").eq(1).css("background-color", "teal");
});
</script>
</head>
<body>
<p>আমার নাম জিহাদ (index 0)</p>
<p>আমি চাঁদপুরে বাস করি (index 1)</p>
<p>আমার নাম শাহ পরান (index 2)</p>
<p>আমিও চাঁদপুরে বাস করি (index 3)</p>
</body>
</html>
ফলাফল
filter() মেথড
filter() মেথড একটি মানদণ্ডের উপর ভিত্তি করে কোনো এলিমেন্টকে সিলেক্ট করে। যে এলিমেন্টগুলো এই মানদন্ডের সাথে ম্যাচ করে না তারা নির্বাচন থেকে বাদ পড়ে কিন্তু যেগুলো ম্যাচ করে সে এলিমেন্টগুলো নির্বাচিত হয়।
নিচের উদাহরণে class="test" সম্বলিত সকল <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(".test").css({"background-color": "green", "color": "white"});
});
</script>
</head>
<body>
<p>আমি জিহাদ।</p>
<p class="test">আমি চাঁদপুরে বাস করি।</p>
<p class="test">আমি চাঁদপুরকে অনেক ভালোবাসি।</p>
<p>আমার সবচেয়ে ভালো বন্ধু আরিফ।</p>
</body>
</html>
ফলাফল
not() মেথড
not() মেথডও একটি মানদণ্ডের উপর ভিত্তি করে এলিমেন্টকে সিলেক্ট করে। যে এলিমেন্টগুলো এই মানদন্ডের সাথে ম্যাচ করে তারা নির্বাচন থেকে বাদ পড়ে কিন্তু যেগুলো ম্যাচ করে না সে এলিমেন্টগুলো নির্বাচিত হয়।
বিঃদ্রঃ not() মেথড filter() মেথডের বিপরীত।
নিচের উদাহরণে class="test" নাই এধরণের সকল <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").not(".test").css({"background-color": "green", "color": "white"});
});
</script>
</head>
<body>
<p>আমি জিহাদ।</p>
<p class="test">আমি চাঁদপুরে বাস করি।</p>
<p class="test">আমি চাঁদপুরকে অনেক ভালোবাসি।</p>
<p>আমার সবচেয়ে ভালো বন্ধু আরিফ।</p>
</body>
</html>
ফলাফল
জেকুয়েরি ট্রাভার্সিং রেফারেন্স
ট্রাভার্সিং-এর সবগুলো মেথড জানার জন্য আমাদের জেকুয়েরি ট্রাভার্সিং রেফারেন্স পেজে ভিজিট করুন।