জেকুয়েরি not() মেথড
« জেকুয়েরি ট্রাভার্সিং মেথডসমূহ
সংজ্ঞা এবং ব্যবহার
নির্দিষ্ট বৈশিষ্ট্য মিলে না এমন এলিমেন্টকে not() মেথড দ্বারা রিটার্ন করা যায়।
এই মেথড আপনাকে একটি নির্দিষ্ট বৈশিষ্ট্য সেট করতে দিবে। যেসকল এলিমেন্টের সাথে এই বৈশিষ্ট্য মিলে না তাদেরকে রিটার্ন করা হয় এবং যাদের সাথে মিলে যায় তাদেরকে বাদ দিয়ে দেয়া হয়।
নির্বাচিত এলিমেন্টের একটি গ্রুপ থেকে এক বা একাধিক এলিমেন্টকে বাদ দেওয়ার জন্য এই মেথড ব্যবহার করা হয়।
টিপস: not() মেথড filter() মেথডের সম্পূর্ণ বিপরীতধর্মী।
সিনট্যাক্স ও ব্যাখ্যা
$(selector).not(criteria,function(index))
প্যারামিটার ও তাদের ভ্যালু
নিচের টেবিলে not() মেথডে ব্যবহৃত প্যারামিটার এবং প্যারামিটারের সম্ভাব্য ভ্যালু গুলো দেখানো হলোঃ
| প্যারামিটার | বিবরণ |
|---|---|
| criteria | ঐচ্ছিক। নির্বাচিত এলিমেন্টের একটি গ্রুপ থেকে একটি সিলেক্টর এক্সপ্রেশন, একটি জেকুয়েরি অবজেক্ট অথবা এক বা একাধিক এলিমেন্টকে বাদ দেওয়ার জন্য নির্দেশ করা হয়। টিপসঃ একাধিক বৈশিষ্ট্য নির্দেশ করতে কমা(,) ব্যবহার করুন। |
| function(index) | ঐচ্ছিক। একটি গ্রুপের প্রতিটি এলিমেন্টের জন্য একটি ফাংশন রান হতে নির্দেশ করে। যদি ইহা true রিটার্ন করে তবে এলিমেন্টকে বাদ দেওয়া হবে, অন্যথায় এলিমেন্টকে রাখা হবে।
|
not()মেথড সংক্রান্ত উদাহরণ
"intro" ক্লাস নেই এমন সকল <p> এলিমেন্ট রিটার্ন করেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>css referance example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").not(".intro").css("background-color", "yellow");
});
</script>
</head>
<body>
<h1>আমার হোমপেজে আপনাকে স্বাগতম </h1>
<p> আমার নাম জিহাদ।</p>
<p class="intro">আমি চাঁদপুরে বাস করি।</p>
<p class="intro">আমি চাঁদপুরকে ভালবাসি।</p>
<p>আমার ভাল বন্ধু হচ্ছে রাসেল।</p>
</body>
</html>
ফলাফল
যে সকল <p> এলিমেন্ট জোড় নয় তাদের রিটার্ন
কিভাব :even সিলেক্টরের সাথে not() ব্যবহার করে যে সকল <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(){
$("p").not(":even").css("background-color", "aqua");
});
</script>
</head>
<body>
<p>আমি নিজামুদ্দিন (index 0).</p>
<p>আমি চাঁদপুরে বাস করি(index 1).</p>
<p>আমার প্রিয় বন্ধু অনিক (index 2).</p>
<p>আমি রাজা (index 3).</p>
<p>আমি চাঁদপুরে বাস করি (index 4).</p>
<p>আমার প্রিয় বন্ধু হাসান (index 5).</p>
</body>
</html>
ফলাফল
একাধিক বৈশিষ্ট্য
যেসকল <p> এলিমেন্টের "intro" ক্লাস এবং "outro" আইডি নেই তাদেরকে কিভাবে রিটার্ন করা যায় তা নিচের উদাহরনে দেখান হলো
উদাহরণঃ২
<!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(){
$("p").not(".intro, #outro").css("background-color", "aqua");
});
</script>
</head>
<body>
<h1>আমার হোমপেজে আপনাকে স্বাগতম </h1>
<p> আমার নাম জিহাদ।</p>
<p class="intro">আমি চাঁদপুরে বাস করি।</p>
<p id="outro">আমি চাঁদপুরকে ভালবাসি।</p>
<p>আমার ভাল বন্ধু হচ্ছে বক্কু।</p>
</body>
</html>
ফলাফল
জেকুয়েরি অবজেক্ট ব্যবহার করে
কিভাবে একটি জেকুয়েরি অবজেক্টের সাহায্যে একটি <div> এলিমেন্টের মধ্যে যেসকল <p> এলিমেন্টের "intro" ক্লাস নেই তাদেরকে রিটার্ন করা যায় তা নিচের উদাহরনে দেখান হলো।
উদাহরণঃ৩
<!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(){
$("p").not($("div p.intro")).css("background-color", "aqua");
});
</script>
</head>
<body>
<div style="border:1px sতolid black;">
এটি একটি div এলিমেন্ট
<h1>আমার হোমপেইজে স্বাগতম</h1>
<p>আমার নাম ইমরান</p>
<p class="intro">আমি চাঁদপুরে থাকি (গ্রুপ থেকে p এলিমেন্টটি রিমুভ করা হবে)।</p>
<p>মুন্না আমার ঘনিষ্ঠ বন্ধু।</p>
</div>
<p class="intro">এই p এলিমেন্টটি div এর বাইরের এলিমেন্ট, এবং এটি রিমুভ হবেনা।</p>
<p>এই p এলিমেন্টটিও div এর বাইরের এলিমেন্ট।</p>
</body>
</html>
ফলাফল
DOM
কিভাবে একটি ডোম এলিমেন্টের সাহায্যে যেসকল <p> এলিমেন্টের "intro" আইডি নেই তাদেরকে রিটার্ন করা যায় তা নিচের উদাহরনে দেখানো হলো
উদাহরণঃ৪
<!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(){
$("p").not(document.getElementById("intro")).css("background-color", "aqua");
});
</script>
</head>
<body>
<h1>আমার হোমপেজে আপনাকে স্বাগতম</h1>
<p>আমার নাম জিহাদ।</p>
<p id="intro">আমি চাঁদপুর বাস করি।</p>
<p>চাঁদপুর অসাধারন একটি শহর।</p>
</body>
</html>
ফলাফল
ফাংশন ব্যবহার করে
কিভাবে একটি ফাংশন ব্যবহার করে যেসকল <p> এলিমেন্টে দুইটি <span> এলিমেন্ট নেই তাদের সিলেক্ট করা যায় তা নিচের উদাহরনে দেখানো হলো
উদাহরণঃ৫
<!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(){
$("p").not(function(){
return $("span", this).length == 2;}).css("background-color", "aqua");
});
</script>
</head>
<body>
<div>
<p>একটি <span>span</span> এলিমেন্টযুক্ত একটি p এলিমেন্ট।</p>
<p>দুটি <span>span</span> এলিমেন্টযুক্ত একটি <span>p এলিমেন্ট।</span></p>
<p>একটি <span>span</span> এলিমেন্টযুক্ত একটি p এলিমেন্ট।</p>
<p>দুটি <span>span</span> এলিমেন্টযুক্ত একটি <span>p এলিমেন্ট।</span></p>
<p>কোন span এলিমেন্ট ছাড়াই একটি p এলিমেন্ট।</p>
</div>
<div>এই উদাহরনে ঐসকল p এলিমেন্ট রিটার্ন করবে, যেগুলোতে দুইটি span এলিমেন্ট নেই।</div>
</body>
</html>
ফলাফল
« জেকুয়েরি ট্রাভার্সিং মেথডসমূহ