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

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


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


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

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

পরামর্শঃ  নির্বাচিত এলিমেন্টের পরে নির্দিষ্ট কন্টেন্ট অন্তর্ভূক্ত করতে

after() মেথড ব্যবহার করুন।


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

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

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

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

প্যারামিটার বিবরণ
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").before("<p>Satt Academy</p>");
    });
});
</script>
</head>
<body>

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

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

</body>
</html>

ফলাফল




উদাহরণ

before() - এইচটিএমএল, জেকুয়েরি এবং ডোম দ্বারা কন্টেন্ট তৈরি

before() মেথডের মাধ্যমে কন্টেট অন্তর্ভূক্তকরন।

উদাহরণ

<!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 beforeText() {
    var txt1 = "<b>আমি </b>";                    // এইচটিএমএলের মাধ্যমে এলিমেন্ট তৈরি
    var txt2 = $("<i></i>").text("জেকুয়েরি ");     // জেকুয়েরির মাধ্যমে তৈরি
    var txt3 = document.createElement("b");    // DOM এর মাধ্যমে তৈরি
    txt3.innerHTML = "পছন্দ করি!";
    $("img").before(txt1, txt2, txt3);    // ইমেজের পূর্বে নতুন এলিমেন্ট অন্তর্ভূক্ত করা
}
</script>
</head>
<body>

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

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

<button onclick="beforeText()">টেক্সট অন্তর্ভূক্ত করুন</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").before(function(n){
            return "<div>উপরের p এলিমেন্টের ইনডেক্স " + n + "</div>";
        });
    });
});
</script>
</head>
<body>

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

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

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

</body>
</html>

ফলাফল




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