জেকুয়েরি prevUntil() মেথড

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

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

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

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

ডোম ট্রিঃ এই মেথডটি ডোম এলিমেন্টের পিছনের দিকে যায়।

নোটঃ যদি দুটো প্যারামিটারই খালি থাকে, তাহলে এই মেথড সকল পূর্ববর্তী সিবলিং কে রিটার্ন করবে (prevAll() মেথডের মতোই)।

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

prev() - নির্বাচিত এলিমেন্টের পূর্ববর্তী সিবলিং এলিমেন্ট রিটার্ন করে
prevAll() - নির্বাচিত এলিমেন্টের সকল পূর্ববর্তী সিবলিং এলিমেন্ট রিটার্ন করে

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

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

$(selector).prevUntil(stop,filter)

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

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

প্যারামিটার	বিবরণ
stop	ঐচ্ছিক। পূর্ববর্তী সিবলিং এলিমেন্ট মিলকরনের ক্ষেত্রে কোথায় সার্চ সমাপ্ত করবে তার জন্য একটি সিলেক্টর এক্সপ্রেশন, এলিমেন্ট অথবা জেকুয়েরি অবজেক্টকে ইঙ্গিত করে।
filter	ঐচ্ছিক। selector এবং stop এর মধ্যের সিবলিং এলিমেন্ট সার্চকে সংক্ষিপ্তকরনের জন্য একটি সিলেক্টর এক্সপ্রেশনকে নির্দেশ করে। নোট: একাধিক সিবলিং রিটার্ন করতে প্রতিটি এক্সপ্রেশনকে কমার(,) সাহায্যে আলাদা করতে হবে।

প্যারামিটার

বিবরণ

stop

ঐচ্ছিক। পূর্ববর্তী সিবলিং এলিমেন্ট মিলকরনের ক্ষেত্রে কোথায় সার্চ সমাপ্ত করবে তার জন্য একটি সিলেক্টর এক্সপ্রেশন, এলিমেন্ট অথবা জেকুয়েরি অবজেক্টকে ইঙ্গিত করে।

filter

ঐচ্ছিক। selector এবং stop এর মধ্যের সিবলিং এলিমেন্ট সার্চকে সংক্ষিপ্তকরনের জন্য একটি সিলেক্টর এক্সপ্রেশনকে নির্দেশ করে।

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

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

উদাহরণ

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

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

</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="../../ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("li.start").prevUntil("li.stop", ".first").css({"color": "red", "border": "3px solid green"});
});
</script>
</head>
<body>

<div style="width:500px;" class="siblings">
  <ul>ul (parent)
    <li class="stop">li (sibling with class name "stop")</li>
    <li class="first">li (the previous sibling of li with class name "start")</li>
    <li>li (the previous sibling of li with class name "start")</li>
    <li class="first">li (the previous sibling of li with class name "start")</li>
    <li class="start">li (sibling with class name "start")</li>
    <li>li (sibling)</li>
    <li>li (sibling)</li>
  </ul>
</div>

<p>এই উদাহরণে, আমরা শুধু ক্লাসের নাম দিয়ে 'start' এবং ক্লাসের নাম দিয়ে li এলিমেন্ট "stop" নাম দিয়ে পূর্ববর্তী সহোদর উপাদান ফিরে 'first', Li এলিমেন্ট দ্বারা অনুসন্ধান ফলাফলে নিচে সংকীর্ণ।</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").prevUntil("h3", ".first, .second, .third").css({"color": "red", "border": "3px solid green"});
});
</script>
</head>
<body>

<div style="width:500px;" class="siblings">
  <div>parent
    <h3>h3</h3>
    <h3 class="third">ক্লাসনেম "third" যুক্ত h3 এলিমেন্ট</h3>
    <span>span</span>
    <span class="second">ক্লাসনেম "second" যুক্ত span এলিমেন্ট</span>
    <span class="second">ক্লাসনেম "second" যুক্ত আরেকটি span এলিমেন্ট</span>
    <p>p</p>
    <p class="first">ক্লাসনেম "first" যুক্ত p এলিমেন্ট</p>
    <p>p</p>
    <h3>h3</h3>
    <h2>h2</h2>
    <span>span</span>
    <p>p</p>
  </div>
</div>

<p>এই উদাহরণে আমরা "first", "second" এবং "third" ক্লাসনেম যুক্ত সকল এলিমেন্টকে রিটার্ন করেছি, যেগুলো h2 এবং h3 এর মধ্যের সহোদর (sibling) এলিমেন্ট।</p>

</body>
</html>

ফলাফল

DOM

একটি সিলেক্টরের পরিবর্তে একটি ডোম এলিমেন্ট ব্যবহার করে দুইটি আর্গুমেন্টের মাঝের সিবলিং রিটার্ন করা যায়।

উদাহরণঃ৩

<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরির উদাহরণ</title>
<style>
.siblings * {
    display: block;
    border: 3px solid deeppink;
    color: deeppink;
    padding: 5px;
    margin: 15px;
}
</style>
<script src="../../ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
    var DOM = document.getElementsByClassName("li.stop");
    $("li.start").prevUntil(DOM).css({"color": "red", "border": "3px solid green"});
});
</script>
</head>
<body>

<div style="width:500px;" class="siblings">
  <ul>ul (parent)
    <li class="stop">li ("stop"এলিমেন্টের সহদর(sibling))</li>
    <li>li ("start"এলিমেন্ট li এলিমেন্টের পরের সহদর(sibling))</li>
    <li>li ("start"এলিমেন্ট li এলিমেন্টের পরের সহদর(sibling))</li>
    <li>li ("start"এলিমেন্ট li এলিমেন্টের পরের সহদর(sibling))</li>
    <li class="start">li ("start"এলিমেন্টের সহদর(sibling))</li>
    <li>li (সহদর-sibling)</li>
    <li>li (সহদর-sibling)</li>
  </ul>
</div>

<p>উদাহরনস্বরুপঃ "start" ক্লাসযুক্ত li এলিমেন্ট এবং "stop" ক্লাস যুক্ত li এলিমেন্টের মধ্যের পূর্ববর্তী সকল সিবলিং(সহোদর) এলিমেন্টকে রিটার্ন করার জন্য এখানে আমরা  DOM মেথড getElementsByClassName() ব্যবহার করেছি। </p>

</body>
</html>

ফলাফল

উভয় প্যারামিটারে 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").prevUntil(DOM,".first").css({"color": "red", "border": "3px solid green"});
});
</script>
</head>
<body>

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

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

</body>
</html>

ফলাফল

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

ক্লায়েন্ট সাইড টিউটোরিয়াল

সার্ভার সাইড টিউটোরিয়ায়াল

প্রোগ্রামিং টিউটোরিয়ায়াল

অন্যান্য

জেকুয়েরি টিউটোরিয়াল

জেকুয়েরি ইফেক্ট

জেকুয়েরি এইচটিএমএল

জেকুয়েরি ট্রাভার্সিং

জেকুয়েরি অ্যাজাক্স

জেকুয়েরি বিবিধ

জেকুয়েরি রেফারেন্স

জেকুয়েরি prevUntil() মেথড

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

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

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

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

উদাহরণ

ফলাফল

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

উদাহরণ১

ফলাফল

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

উদাহরণঃ২

ফলাফল

DOM

উদাহরণঃ৩

ফলাফল

উভয় প্যারামিটারে DOM ব্যবহার

উদাহরণঃ৪

ফলাফল

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

ক্লায়েন্ট সাইড টিউটোরিয়াল

সার্ভার সাইড টিউটোরিয়ায়াল

প্রোগ্রামিং টিউটোরিয়ায়াল

অন্যান্য