স্যাট একাডেমী
শিক্ষা নিয়ে বাণিজ্য নয়, আসুন শিক্ষা বাণিজ্যকে "না" বলি।
Facebook Twitter Google LinkedIn
☰ জেকুয়েরি জাভাস্ক্রিপ্ট এঙ্গুলার এইচটিএমএল সিএসএস বুটস্ট্রাপ
লগইন
টিউটোরিয়াল
 

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

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


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

nextUntil() মেথড selector এবং stop এর মধ্যবর্তী সকল সিবলিং এলিমেন্টকে রিটার্ন করে।

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

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

নোট: যদি উভয় প্যারামিটার খালি থাকে তবে ইহা পরবর্তী সকল সিবলিং এলিমেন্টকে রিটার্ন করবে(nextAll() মেথডের মত)।

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

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

$(selector).detach()$(selector).nextUntil(stop,filter)

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

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

প্যারামিটার বিবরণ
stop ঐচ্ছিক। সিবলিং এলিমেন্টের অনুসন্ধান কোথায় বন্ধ করতে হবে তার জন্য একটি সিলেক্টর, এলিমেন্ট অথবা জেকুয়েরি অবজেক্ট নির্দেশ করে।
filter ঐচ্ছিক। selector এবং stop এর মধ্যবর্তী সিবলিং এলিমেন্টের অনুসন্ধান সংক্ষিপ্ত করতে একটি সিলেক্টর এক্সপ্রেশন নির্দেশ করে

নোট: একাধিক সিবলিং রিটার্ন করতে প্রতিটি এক্সপ্রেশনকে কমার(,) সাহায্যে আলাদা করতে হবে।

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

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

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরির উদাহরণ</title>
 <style>
.test * {
    display: block;
    border: 2px solid lime;
    color: lime;
    padding: 5px;
    margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("li.start").nextUntil("li.stop").css({"color": "green", "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 ("start" ক্লাস li এলিমেন্টের পরের সিবলিং)</li>
    <li>li ("start"এলিমেন্ট li এলিমেন্টের পরের সিবলিং)</li>
    <li class="stop">li("stop" ক্লাসযুক্ত সিবলিং)</li>
  </ul>
</div>

<p> উদাহরনস্বরুপঃ "start" ক্লাসযুক্ত সিবলিং এবং "stop" ক্লাসযুক্ত সিবলিং এর মধ্যকার সকল li এলিমেন্টকে রিটার্ন করে। </p>

</body>
</html>

ফলাফল

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

দুইটি প্যারামিটার ব্যবহার করে কিভাবে দুইটি আর্গুমেন্টের মধ্যবর্তী সিবলিং এলিমেন্টের অনুসন্ধানকে সংক্ষিপ্ত করা যায় তা নিচের উদাহরনে দেখানো হলো।

উদাহরণঃ১

<!DOCTYPE html>
<html>
<head> 
<title>জেকুয়েরির উদাহরণ</title>
<style>
.siblings * {
    display: block;
    border: 3px solid deeppink;
    color: deeppink;
    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").nextUntil("li.stop", ".first").css({"color": "red", "border": "3px solid green"});
});
</script>
</head>
<body>

<div style="width:500px;" class="siblings">
  <ul>ul (parent)
    <li>li (sibling)</li>
    <li>li (sibling)</li>
    <li class="start">li ("start" ক্লাসযুক্ত সিবলিং)</li>
    <li class="first">li ("start" ক্লাসযুক্ত li এর পরবর্তী সিবলিং)</li>
    <li>li ("start" ক্লাসযুক্ত li এর পরবর্তী সিবলিং)</li>
    <li class="1">li ("start" ক্লাসযুক্ত li এর পরবর্তী সিবলিং)</li>
    <li class="stop">li ("stop" ক্লাসযুক্ত সিবলিং)</li>
  </ul>
</div>

<p>এই উদাহরনে আমরা, "start" এবং "stop" ক্লাসযুক্ত li এলিমেন্টের মধ্যের "first" ক্লাসনেম যুক্ত সিবলিং এলিমেন্টকে রিটার্ন করার মাধ্যমে সার্চ রেজাল্টকে সংক্ষিপ্ত করেছি।</p>

</body>
</html>

ফলাফল

একাধিক সিবলিং রিটার্ন

কিভাবে দুইটি আর্গুমেন্টের মধ্যবর্তী একাধিক সিবলিং রিটার্ন করা যায় তা নিচের উদাহরনে দেখানো হলোঃ

উদাহরণ২ঃ

<!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(){
    $("h2").nextUntil("h3", ".first,.second,.third").css({"color": "red", "border": "3px solid green"});
});
</script>
</head>
<body>

<div style="width:500px;" class="siblings">
  <div>parent
    <p>p</p>
    <span>span</span>
    <h2>h2</h2>
    <h3>h3</h3>
    <p>p</p>
    <p class="first">p ক্লাস "প্রথম"</p>
    <p>p</p>
    <span class="second">span ক্লাস "দ্বিতীয়"</span>
    <span class="second"> আরও span ক্লাস "দ্বিতীয়"</span>
    <span>স্পেন(span)</span>
    <h3 class="third">h3 ক্লাস "তৃতীয়"</h3>
    <h3>h3</h3>
   </div>
</div>

<p>উদাহরণসরুপঃ এখানে আমরা  H2 এবং h3-এর মধ্যে  এলিমেন্টের পরের সকল সহোদর এলিমেন্টকে রিটার্ন করবে, যাদের ক্লাস  "first", "second" এবং "third"।</p>

</body>
</html>

ফলাফল

DOM

একটি DOM এলিমেন্ট ব্যবহার করে কিভাবে দুইটি আর্গুমেন্টের মধ্যবর্তী সকল সিবলিং এলিমেন্টকে রিটার্ন করা যায় তা নিচের উদাহরনে দেখান হলো।

উদাহরণঃ৩

<!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(){
    var DOM = document.getElementsByClassName("li.stop");
    $("li.start").nextUntil(DOM).css({"color": "red", "border": "3px solid green"});
});
</script>
</head>
<body>

<div style="width:500px;" class="siblings">
  <ul>ul (parent)
    <li>li (sibling)</li>
    <li>li (sibling)</li>
    <li class="start">li ( ক্লাসের নাম দিয়ে sibling "start")</li>
    <li>li (ক্লাসের নাম দিয়ে পরবর্তী sibling "start")</li>
    <li>li (ক্লাসের নাম দিয়ে পরবর্তী sibling "start")</li>
    <li>li (ক্লাসের নাম দিয়ে পরবর্তী sibling "start")</li>
    <li class="stop">li (ক্লাসের নাম দিয়ে পরবর্তী sibling "stop")</li>
  </ul>
</div>

<p>এই উদাহরণে, আমরা DOM পদ্ধতি getElementsByClassName() ব্যবহার করে  ক্লাস নাম দিয়ে li এলিমেন্টের মধ্যে সকল পরবর্তী sibling এলিমেন্ট রিটার্ন করতে পারি।</p>

</body>
</html>

ফলাফল

দুইটি প্যারামিটার এবং DOM ব্যবহার করে

নিচের উদাহরনে দুইটি আর্গুমেন্টের মধ্যবর্তী সিবলিং এলিমেন্টের অনুসন্ধান করতে একটি সিলেক্টরের পরিবর্তে একটি DOM এলিমেন্ট এবং দুইটি প্যারামিটারের ব্যবহার দেখানো হলো।

উদাহরণ৪

<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরির উদাহরণ</title>
<style>
.siblings * {
    display: block;
    border: 3px solid deeppink;
    color: deeppink;
    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(){
    var DOM = document.getElementsByClassName("li.stop");
    $("li.start").nextUntil(DOM, ".first").css({"color": "red", "border": "3px solid green"});
});
</script>
</head>
<body>

<div style="width:500px;" class="siblings">
  <ul>ul (parent)
    <li>li (sibling)</li>
    <li>li (sibling)</li>
    <li class="start">li ("start" ক্লাসযুক্ত সিবলিং)</li>
    <li class="first">li ("start" ক্লাসযুক্ত li এর পরবর্তী সিবলিং)</li>
    <li>li ("start" ক্লাসযুক্ত li এর পরবর্তী সিবলিং)</li>
    <li class="first">li ("start" ক্লাসযুক্ত li এর পরবর্তী সিবলিং)</li>
    <li class="stop">li ("stop" ক্লাসযুক্ত সিবলিং)</li>
  </ul>
</div>

<p>এই উদাহরনে আমরা, "start" ক্লাসযুক্ত li এলিমেন্ট এবং "stop" ক্লাসযুক্ত li এলিমেন্টের মধ্যের "first" ক্লাসনেমযুক্ত এলিমেন্টের পরবর্তী সিবলিং রিটার্ন করার মাধ্যমে সার্চ রেজাল্ট সংক্ষিপ্ত করেছি।</p>

</body>
</html>

ফলাফল

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


আমাদের টিউটোরিয়াল সমূহ


ক্লায়েন্ট সাইড টিউটোরিয়াল
HTML টিউটোরিয়াল
CSS টিউটোরিয়াল
BootStrap টিউটোরিয়াল
JavaScript টিউটোরিয়াল
jQuery টিউটোরিয়াল
AngualarJs টিউটোরিয়াল
সার্ভার সাইড টিউটোরিয়ায়াল
পিএইচপি টিউটোরিয়াল
এসকিউএল টিউটোরিয়াল ওয়ার্ডপ্রেস টিউটোরিয়াল
প্রোগ্রামিং টিউটোরিয়ায়াল
সি টিউটোরিয়াল
পাইথন টিউটোরিয়াল
অন্যান্য
চাকুরীর প্রশ্ন-উত্তর
ফোরাম
ব্লগ
© স্যাট একাডেমী