জেকুয়েরি after() মেথড
« জেকুয়েরি এইচটিএমএল/সিএসএস মেথডসমূহ
সংজ্ঞা এবং ব্যবহার
after() মেথড নির্বাচিত এলিমেন্টের পরে নির্দিষ্ট কন্টেন্ট অন্তর্ভূক্ত করে।
পরামর্শঃ নির্বাচিত এলিমেন্টের পুর্বে কন্টেন্ট অন্তর্ভূক্ত করতে, before() মেথড ব্যবহার করুন।
সিনট্যাক্স ও ব্যাখ্যা
$(selector).after(content,function(index))
প্যারামিটার ও তাদের ভ্যালু
নিচের টেবিলে after() মেথডে ব্যবহৃত প্যারামিটার এবং প্যারামিটারের সম্ভাব্য ভ্যালু গুলো দেখানো হলোঃ
| প্যারামিটার | বিবরণ |
|---|---|
content |
আবশ্যক। যে কন্টেন্ট অন্তর্ভুক্ত করা হবে সেটিকে নির্দেশ করে। (এইচটিএমএল ট্যাগও থাকতে পারে)
সম্ভাব্য ভ্যালুগুলো হলো:
|
function(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>
ফলাফল
« জেকুয়েরি এইচটিএমএল/সিএসএস মেথডসমূহ