জেকুয়েরি জাভাস্ক্রিপ্ট এঙ্গুলার এইচটিএমএল সিএসএস বুটস্ট্রাপ
ফোরাম
 

জেকুয়েরি 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>
 

ফলাফল





« জেকুয়েরি ট্রাভার্সিং মেথডসমূহ