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