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

জেকুয়েরি after() মেথড


« জেকুয়েরি এইচটিএমএল/সিএসএস মেথডসমূহ


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

after() মেথড নির্বাচিত এলিমেন্টের পরে নির্দিষ্ট কন্টেন্ট অন্তর্ভূক্ত করে।

পরামর্শঃ নির্বাচিত এলিমেন্টের পুর্বে কন্টেন্ট অন্তর্ভূক্ত করতে, before() মেথড ব্যবহার করুন।


সিনট্যাক্স ও ব্যাখ্যা

$(selector).after(content,function(index))

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

নিচের টেবিলে after() মেথডে ব্যবহৃত প্যারামিটার এবং প্যারামিটারের সম্ভাব্য ভ্যালু গুলো দেখানো হলোঃ

প্যারামিটার বিবরণ
content আবশ্যক। যে কন্টেন্ট অন্তর্ভুক্ত করা হবে সেটিকে নির্দেশ করে। (এইচটিএমএল ট্যাগও থাকতে পারে)

সম্ভাব্য ভ্যালুগুলো হলো:

  • এইচটিএমএল এলিমেন্ট
  • জেকুয়েরি অবজেক্ট
  • ডোম এলিমেন্ট
function(index) ঐচ্ছিক। একটি ফাংশন নির্দিষ্ট করে যা কন্টেন্ট অন্তর্ভুক্ত করতে রিটার্ন করে।
  • index - সেটের মধ্যে এলিমেন্টের ইনডেক্স পজিশন রিটার্ন করে।

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").after("<p>হ্যালো বাংলাদেশ!</p>");
    });
});
</script>
</head>
<body>

<button>প্রত্যেক p এলিমেন্টের পরে কন্টেন্ট অন্তর্ভূক্ত করুন</button>

<p>এটি একটি প্যারাগ্রাফ।</p>
<p>এটিও একটি প্যারাগ্রাফ।</p>

</body>
</html>

ফলাফল




উদাহরণ

after() - এইচটিএমএল, জেকুয়েরি এবং ডোম এর সাথে কন্টেন্ট তৈরী।

after() মেথডের মাধ্যমে কন্টেন্ট অন্তর্ভুক্ত করা যায়।

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
function afterText() {
    var txt1 = "<b>আমার </b>";    // এইচটিএমএলের সাহায্যে এলিমেন্ট তৈরি
    var txt2 = $("<i></i>").text("জেকুয়েরি! ");    // জেকুয়েরির সাহায্যে তৈরি
    var txt3 = document.createElement("b");   // DOM এর সাহায্যে তৈরি
    txt3.innerHTML = "শিখতে অনেক ভালো লাগে!";
    $("img").after(txt1, txt2, txt3);  // img এলিমেন্টের পর নতুন এলিমেন্ট তৈরি
}
</script>
</head>
<body>

<img src="../images/satt.png" alt="logo" width="140" height="140">

<p>ইমেজের পর টেক্সট অন্তর্ভূক্ত করার জন্য ক্লিক করুন</p>

<button onclick="afterText()">শেষে অন্তর্ভূক্ত করুন</button>

</body>
</html>

ফলাফল




ফাংশন ব্যবহার করে কন্টেন্ট অন্তর্ভূক্তকরণ

নির্বাচিত এলিমেন্টের পরে কন্টেন্ট অন্তর্ভূক্ত করতে কিভাবে একটি ফাংশন ব্যবহার করা যায়।

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").after(function(n){
            return "<div>উপরের p এলিমেন্টের ইনডেক্স " + n + "</div>";
        });
    });
});
</script>
</head>
<body>

<h3>এটি একটি হেডিং</h3>

<p>এটি একটি প্যারাগ্রাফ।</p>
<p>এটি আরেকটি প্যারাগ্রাফ।</p>
<p>এটি আরেকটি প্যারাগ্রাফ।</p>

<button>প্রতিটি p এলিমেন্টের পরে কন্টেন্ট ইনসার্ট করুন</button>

</body>
</html>

ফলাফল




« জেকুয়েরি এইচটিএমএল/সিএসএস মেথডসমূহ