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

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

« জেকুয়েরি ট্রাভার্সিং মেথডসমূহ


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

next() মেথড নির্বাচিত এলিমেন্টের পরবর্তী সিবলিং এলিমেন্টকে রিটার্ন করে।

সিবলিং এলিমেন্ট বলতে বুঝায় যাদের প্যারেন্ট এলিমেন্ট একই।

ডোম ট্রি: এই মেথড ডোম এলিমেন্টের পরবর্তী সিবলিং এলিমেন্ট পর্যন্ত যেতে পারে।

রিলেটেড মেথডসমূহ:


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

$(selector).detach()$(selector).next(filter)

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

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

প্যারামিটার বিবরণ
filter ঐচ্ছিক। পরবর্তী সিবলিং খোজার কাজ সংক্ষিপ্ত করার জন্য একটি সিলেক্টর এক্সপ্রেশন নির্দেশ করে।

next()মেথড সংক্রান্ত উদাহরণ

নিচের উদাহরনে "start" ক্লাসযুক্ত প্রতিটি <li> এলিমেন্টের পরবর্তী সিবলিং এলিমেন্টকে রিটার্ন করেঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
.test * {
    display: block;
    border: 2px solid silver;
    color: silver;
    padding: 5px;
    margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("li.start").next().css({"color": "orange", "border": "2px solid blue"});
});
</script>
</head>
<body>

<div style="width:500px;" class="test">
  <ul>ul (প্যারেন্ট)
    <li>li (সিবলিং)</li>
    <li>li (সিবলিং)</li>
    <li class="start">li ("start" ক্লাসযুক্ত সিবলিং)</li>
    <li>li ("start" ক্লাসনেমযুক্ত li এর পরবর্তী সিবলিং)</li>
    <li>li (সিবলিং)</li>
    <li>li (সিবলিং)</li>
  </ul>
</div>

</body>
</html>

ফলাফল




প্রতিটি <div> এলিমেন্টের পরবর্তী সিবলিং এলিমেন্টকে সিলেক্ট

কিভাবে প্রতিটি <div> এলিমেন্টের পরবর্তী সিবলিং এলিমেন্টকে সিলেক্ট করা যায় তা নিচের উদাহরনে দেখানো হলোঃ

উদাহরণঃ১

<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরির উদাহরণ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("div").next().css("background-color", "aqua");
});
</script> 
</head>
<body>

<h1>$("div").next() কি সিলেক্ট করবে?</h1>

<div style="border:2px solid black;padding:10px;">This is a div element.</div>
<p> এই p  এলিমেন্ট টি ব একটি div এলিমেন্টের পরবর্তী সিবলিং  এলিমেন্ট.</p>
<p>এটি অন্য  একটি p এলিমেন্ট.</p>

<div style="border:2px solid black;padding:10px;">
  <p> এটি  ডিভ  এলি্মেন্টের ভিতরে একটি p এলিমেন্ট</p>
</div>

<h2>এই হেডিং টি  একটি ডিভ এলিমেন্টের পরবর্তী সিবলিং এলিমেন্ট </h2>
<p> এটি একটি p এলিমেন্ট</p>

</body>
</html>
 

ফলাফল




সার্চ সংক্ষিপ্তকরণ

কিভাবে প্রতিটি <div> এলিমেন্টের পরবর্তী সিবলিং <p> এলিমেন্টকে সিলেক্ট করতে পারি তা নিচের উদাহরনে দেখানো হলোঃ

উদাহরণঃ২

<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরির উদাহরণ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("div").next("p").css("background-color", "aqua");
});
</script>
</head>
<body>

<h1> $("div").next("p")সিলেক্ট হবে কি?</h1>

<div style="border:2px solid black;padding:10px;">এটি একটি ডিভ এলিমেন্ট।</div>
<p>এই p উপাদানটি একটি div উপাদানের পরবর্তী সহোদর উপাদান।</p>
<p>এটি অন্য একটি p এলিমেন্ট</p>

<div style="border:2px solid black;padding:10px;">
  <p>একটি div উপাদানের ভিতরে একটি p উপাদান।</p>
</div>

<h2> এটি  একটি হেডার, এবং ডিভ এলিমেন্টটি এর পরবর্তী সহোদর উপাদান।</h2>
<p>এটি  একটি p এলিমেন্ট ( এই p এলিমেন্টটি সিলেক্ট হবে না, কারন h2 উপাদান উপরে div উপাদান এর "next" উপাদানের সহোদর উপাদান । যাইহোক আপনি যদি h2 উপাদানটি মুছতে চান, এই প্যারাগ্রাফটি পরবর্তীতে আরেকটি ডিভ এলিমেন্টের "next"এলিমেন্টের সহোদর এলিমেন্ট হবে , এই এলিমেন্টে যে ফলাফল পাওয়া যাবে তা নিজে থাকেই সিলেক্ট হয়ে যাবে)।</p>

</body>
</html>
 

ফলাফল





« জেকুয়েরি ট্রাভার্সিং মেথডসমূহ