জেকুয়েরি wrap() মেথড
« জেকুয়েরি এইচটিএমএল/সিএসএস মেথডসমূহ
সংজ্ঞা এবং ব্যবহার
wrapAll() মেথড প্রতিটি নির্বাচিত এলিমেন্টের চারপাশে নির্দিষ্ট এইচটিএমএল এলিমেন্ট wrap করে।
সিনট্যাক্স ও ব্যাখ্যা
$(selector).wrap(wrappingElement,function(index))
প্যারামিটার ও তাদের ভ্যালু
নিচের টেবিলে wrap() মেথডে ব্যবহৃত প্যারামিটার এবং প্যারামিটারের সম্ভাব্য ভ্যালু গুলো দেখানো হলোঃ
| প্যারামিটার | বিবরণ |
|---|---|
wrappingElement |
আবশ্যক। প্রতিটি নির্বাচিত এলিমেন্টের চারপাশে কোন এইচটিএমএল এলিমেন্ট wrap করা হবে তা নির্দেশ করে সম্ভাব্য ভ্যালুগুলো হলো:
|
function (index) |
ঐচ্ছিক। একটি ফাংশন উল্লেখ করে যা একটি wrapping এলিমেন্ট রিটার্ন করে।
|
উদাহরণ
<!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").wrap("<div></div>");
});
});
</script>
<style>
div{background-color: green;}
</style>
</head>
<body>
<p>এটি একটি অনুচ্ছেদ</p>
<p>এটি অন্য একটি অনুচ্ছেদ</p>
<button> প্রত্যেক p এলিমেন্টকে ডিভ এলিমেন্ট দ্বারা ঘিরে রাখে।</button>
</body>
</html>
ফলাফল
উদাহরণ
ডোম দ্বারা একটি নতুন এলিমেন্ট তৈরি
একটি এলিমমেন্ট তৈরী এবং নির্বাচিত এলিমেন্টের কন্টেন্টের চারপাশে এটি wrap করতে কিভাবে document.createElement() ব্যবহার করা যায়।
উদাহরণ
<!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").wrap(document.createElement("div"));
});
});
</script>
<style>
div {background-color: green;}
</style>
</head>
<body>
<p>এটি একটি প্যারাগ্রাফ।</p>
<p>এটি অন্য আরেকটি প্যারাগ্রাফ।</p>
<button>নতুন একটি div এলিমেন্ট তৈরি করুন এবং প্রতিটি p এলিমেন্টের চারপাশে wrap করুন</button>
</body>
</html>
ফলাফল
ফাংশন ব্যবহার করে এলিমেন্ট Wrap
একটি ফাংশন ব্যবহার করে নির্বাচিত এলিমেন্টের কন্টেন্টের চারপাশে কিভাবে অন্য একটি এলিমেন্টের মাধ্যমে wrap করতে হবে তা দেখায়।
উদাহরণ
<!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").wrap(function(){
return "<div></div>"
});
});
});
</script>
<style>
div {
background-color: green;
padding: 10px;
}
</style>
</head>
<body>
<p>এটি একটি প্যারাগ্রাফ।</p>
<button>p এলিমেন্টের কাছাকাছি div এলিমেন্ট Wrap করুন।</button>
</body>
</html>
ফলাফল
একটি এলিমেন্ট Wrap এবং unwrap
কিভাবে wrapping এবং unwrapping এলিমেন্টের মধ্যে টোগল করা হয়।
উদাহরণ
<!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(){
$("#test1").click(function(){
$("p").wrap("<div></div>");
});
$("#test2").click(function(){
$("p").unwrap();
});
});
</script>
<style>
div{background-color: green;}
</style>
</head>
<body>
<p>এটি একটি প্যারাগ্রাফ।</p>
<p>এটি অন্য একটি প্যারাগ্রাফ।</p>
<button id="test1">প্রতিটি p এলিমেন্টকে একটি div এলিমেন্টে মোড়ানো হয়</button>
<button id="test2">Unwrap</button>
</body>
</html>
ফলাফল
« জেকুয়েরি এইচটিএমএল/সিএসএস মেথডসমূহ