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

জেকুয়েরি parent > child সিলেক্টর


« জেকুয়েরি সিলেক্টরসমূহ



সংজ্ঞা এবং ব্যবহার

parent > child সিলেক্টরের মাধ্যমে প্যারেন্ট এলিমেন্টের সকল সরাসরি চাইল্ড এলিমেন্টকে সিলেক্ট করা হয়।



সিনট্যাক্স

$("parent > child")


প্যারামিটার ও তাদের ভ্যালু

নিচের টেবিলে parent > child সিলেক্টরে ব্যবহৃত প্যারামিটার এবং প্যারামিটারের সম্ভাব্য ভ্যালু গুলো দেখানো হলোঃ

প্যারামিটার বিবরণ
parent আবশ্যক। যেই এলিমেন্টকে সিলেক্ট করা হবে তার প্যারেন্ট এলিমেন্টকে নির্দেশ করে।
child আবশ্যক। যেই চাইল্ড এলিমেন্টকে (নির্দিষ্ট প্যারেন্ট এলিমেন্টের) সিলেক্ট করা হবে সেটিকে নির্দেশ করে।


parent > child সিলেক্টর সংক্রান্ত উদাহরণ

যে <p> এলিমেন্ট <section> এলিমেন্টের সরাসরি চাইল্ড এলিমেন্ট সেগুলোকে সিলেক্ট

নিচের উদাহরণে parent > child সিলেক্টরের ব্যবহার দেখানো হলোঃ

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
  <title>জেকুয়েরি parent > child সিলেক্টর</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script>
  $(document).ready(function(){
    $("section > p").css({
        "background-color": "green",
        "color": "white",
    });
  });
  </script>
</head>
<body>

  <h3>$("div > span") কি সিলেক্ট করবে?</h3>
  <p>এটি বডির প্রথম প্যারাগ্রাফ।</p>

  <section style="border:1px solid black;">
    <p>এটি সেকশনের প্রথম প্যারাগ্রাফ।</p>
    <div>
      <h3>হেডিং</h3>
      <p>প্যারাগ্রাফ</p>
    </div>
  </section>

</body>
</html>

ফলাফল





সকল <li> এলিমেন্টকে সিলেক্ট, যেগুলো <ul> এলিমেন্টের সরাসরি চাইল্ড এলিমেন্ট

কিভাবে সকল <li> এলিমেন্টকে সিলেক্ট করা যায়, যেগুলো <ul> এলিমেন্টের সরাসরি চাইল্ড এলিমেন্ট।

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
  <title>জেকুয়েরি parent > child সিলেক্টর</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script>
  $(document).ready(function(){
    $("ul > li").css({
        "background-color": "green",
        "color": "white",
    });
  });
  </script>
</head>
<body>

  <ul>
    <li>লিস্ট আইটেম</li>
    <li>লিস্ট আইটেম</li>
  </ul>
  <li>লিস্ট আইটেম</li>
  <li>লিস্ট আইটেম</li>

</body>
</html>

ফলাফল





« জেকুয়েরি সিলেক্টরসমূহ