জেকুয়েরি find() মেথড
« জেকুয়েরি ট্রাভার্সিং মেথডসমূহ
সংজ্ঞা এবং ব্যবহার
find() মেথড সিলেক্টেড এলিমেন্টের উত্তরসূরীদেরকে রিটার্ন করে।
একটি উত্তরসূরী হলো একটি চাইল্ড,গ্র্যান্ডচাইল্ড,গ্রেট-গ্র্যান্ডচাইল্ড এবং এইভাবে আরো।
ডোম ট্রি: এই মেথড ডোম এলিমেন্টের উত্তরসূরীদের মধ্য দিয়ে নিচের দিকে যায়। ডোম ট্রির একলেভেল নিচে যাওয়ার জন্য(সরাসরি চিল্ড্রেনকে রিটার্ন করতে) children() মেথড ব্যবহার করুন।
নোট: filter প্যারামিটারটি find() মেথডের জন্য বাধ্যতামূলক।
টিপস: সকল উত্তরসূরী এলিমেন্টকে রিটার্ন করতে "*" সিলেক্টরটি ব্যবহার করুন।
সিনট্যাক্স ও ব্যাখ্যা
$(selector).detach()$(selector).find(filter)
প্যারামিটার ও তাদের ভ্যালু
নিচের টেবিলে find() মেথডে ব্যবহৃত প্যারামিটার এবং প্যারামিটারের সম্ভাব্য ভ্যালু গুলো দেখানো হলোঃ
| প্যারামিটার | বিবরণ |
|---|---|
| filter | আবশ্যক। উত্তরসূরী অনুসন্ধান করার জন্য একটি সিলেক্টর এক্সপ্রেশন,এলিমেন্ট অথবা জেকুয়েরি অবজেক্টকে নির্দেশ করে বি:দ্র: একাধিক উত্তরসূরী রিটার্ন করতে এক্সপ্রেশনকে কমার সাহায্যে আলাদা করতে হবে। |
find()মেথড সংক্রান্ত উদাহরণ
নিচের উদাহরনে <ul> এলিমেন্টের উত্তরসূরী সকল <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(){
$("ul").find("span").css({"color": "green", "border": "2px solid blue"});
});
</script>
</head>
<body class="ancestors">body (গ্রেট-গ্র্যান্ডপ্যারেন্ট)
<div style="width:500px;">div (গ্র্যান্ডপ্যারেন্ট)
<ul>ul (প্যারেন্ট)
<li>li (চাইল্ড)
<span>span (গ্র্যান্ডচাইল্ড)</span>
</li>
</ul>
</div>
</body>
</html>
ফলাফল
<html> এর সকল উত্তরসূরীকে রিটার্ন করি
নিচের উদাহরনে "*" সিলেক্টর ব্যবহার করে <html> এর সকল উত্তরসূরীকে রিটার্ন করি।
উদাহরণ১ঃ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরির উদাহরণ</title>
<style>
.ancestors * {
display: block;
border: 3px solid deeppink;
color: deeppink;
padding: 5px;
margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("html").find("*").css({"color": "red", "border": "3px solid green"});
});
</script>
</head>
<body class="ancestors">body (great-grandparent)
<div style="width:500px;">div (grandparent)
<ul>ul (direct parent)
<li>li (child)
<span>span (grandchild)</span>
</li>
</ul>
</div>
</body>
</html>
ফলাফল
সকল <span> এলিমেন্টকে রিটার্ন করি যারা <ul> এলিমেন্টের উত্তরসূরী
কিভাবে সকল <span> এলিমেন্টকে রিটার্ন করবো,যারা <ul> এলিমেন্টের উত্তরসূরী তা নিচের উদাহরনে দেখানো হলো
উদাহরণ২ঃ
<!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(){
$("ul").find("span").css({"color": "red", "border": "3px solid green"});
});
</script>
</head>
<body class="ancestors">body (great-grandparent)
<div style="width:500px;">div (grandparent)
<ul>ul (direct parent)
<li>li (child)
<span>span (grandchild)<span>span (great-grandchild)<span>span (great-great-grandchild)</span></span></span>
</li>
<li>li (child)
<span>span (grandchild)</span>
</li>
</ul>
</div>
</body>
</html>
ফলাফল
শুধুমাত্র নির্দিষ্ট ক্লাসনেম যুক্ত উত্তরসূরী সিলেক্ট
কিভাবে "first" ক্লাস যুক্ত উত্তরসূরী এলিমেন্ট রিটার্ন করা যায় তা নিচের উদাহরনে দেখানো হলো
উদাহরণঃ৩
<!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").find(".first").css({"color": "red", "border": "3px solid green"});
});
</script>
</head>
<body class="ancestors">body (great-grandparent)
<div style="width:500px;">div (grandparent)
<ul>ul (direct parent)
<li class="first">li (child)
<span>span (grandchild)</span>
</li>
<li class="second">li (child)
<span class="1">span (grandchild)</span>
</li>
</ul>
</div>
</body>
</html>
ফলাফল
একাধিক উত্তরসূরী রিটার্ন
কিভাবে একাধিক উত্তরসূরী এলিমেন্ট রিটার্ন করা যায় তা নিচের উদাহরনে দেখানো হলো
উদাহরণঃ4
<!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").find("div,li,.first").css({"color": "red", "border": "3px solid green"});
});
</script>
</head>
<body class="ancestors">body (great-grandparent)
<div style="width:500px;">div (grandparent)
<ul>ul (direct parent)
<li class="first">li (child)
<span>span (grandchild)</span>
</li>
<li class="second">li (child)
<span class="1">span (grandchild)</span>
</li>
</ul>
</div>
</body>
</html>
ফলাফল
জেকুয়েরির সাহায্যে সকল <ul> এলিমেন্টের উত্তরসূরী এলিমেন্ট ফিল্টার
জেকুয়েরি অবজেক্টের সাহায্যে কিভাবে <ul> এলিমেন্টের উত্তরসূরী সকল <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(){
var $findSpanElements = $("span");
$("ul").find($findSpanElements).css({"color": "red", "border": "3px solid green"});
});
</script>
</head>
<body class="ancestors">body (great-grandparent)
<div style="width:500px;">div (grandparent)
<ul>ul (direct parent)
<li>li (child)
<span>span (grandchild)<span>span (great-grandchild)<span>span (great-great-grandchild)</span></span></span>
</li>
<li>li (child)
<span>span (grandchild)</span>
</li>
</ul>
</div>
</body>
</html>
ফলাফল
ট্যাগনেমের দ্বারা একটি এলিমেন্টের উত্তরসূরী প্রদর্শন
নিচের উদাহরন একটি প্রদর্শনী যার মাধ্যমে দেখানো হয়েছে কোনগুলো আসলেই <div> এলিমেন্টের উত্তরসূরী এলিমেন্ট।
উদাহরণঃ৫
<!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(){
var treeTraversal = $("div").find("p, span").map(function(){
return this.tagName;}).get().join(", ");
$("div").after("<h2>" + treeTraversal + "<h2>");
});
</script>
</head>
<body>
<div> এটি একটি div এলিমেন্ট। আমার child এলিমেন্টগুলো:
<p>
<span><span></span></span>
</p>
</div>
<p>উদাহরণে, আমরা div এর সকল descendant এলিমেন্ট রিটার্ন করেছি।<p></body>
</body>
</html>
ফলাফল
« জেকুয়েরি ট্রাভার্সিং মেথডসমূহ