জেকুয়েরি ট্রাভার্সিং - সিবলিং
সিবলিং মানে সহোদর অর্থাৎ একই পিতার সন্তানকে বুঝায়।
জেকুয়েরির মাধ্যমে DOM স্ট্রাকচারের একপাশ থেকে অন্য পাশে অর্থাৎ পাশাপাশি ট্রাভার্সিং বা ভ্রমণ করে সহোদর এলিমেন্টকে সিলেক্ট করা যায়।
DOM স্ট্রাকচারে পাশাপাশি ট্রাভার্সিং
আমরা ইতিমধ্যে জেনেছি DOM এর গঠন হচ্ছে গাছ আকৃতির। এই গাছে পরিভ্রমণের অনেকগুলো মেথড রয়েছে। যেগুলো নিম্নে তুলে ধরা হলোঃ
siblings()next()nextAll()nextUntil()prev()prevAll()prevUntil()
siblings() মেথড
siblings() মেথডের মাধ্যমে নির্বাচিত এলিমেন্টের সকল সহোদর এলিমেন্টকে সিলেক্ট করা যায়।
নিচের উদাহরণে <h2> এলিমেন্টের সকল সহোদর এলিমেন্টকে সিলেক্ট করেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরি উদাহরণ</title>
<style>
.test * {
display: block;
border: 2px solid teal;
color: teal;
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(){
$("h2").siblings().css({"color": "green", "border": "2px solid green"});
});
</script>
</head>
<body class="test">
<div>div (parent)
<p>p</p>
<span>span</span>
<h2>h2</h2>
<h3>h3</h3>
<p>p</p>
</div>
</body>
</html>
ফলাফল
কোনো নির্দিষ্ট এলিমেন্টকে খুঁজে বের করার জন্য আপনি ইচ্ছা করলে
siblings() মেথডের মধ্যে অতিরিক্ত প্যারামিটার ব্যবহার করতে পারেন।
নিচের উদাহরণে <h2>এলিমেন্টের সহোদর সকল <p> এলিমেন্টকে সিলেক্ট করেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরি উদাহরণ</title>
<style>
.test * {
display: block;
border: 2px solid teal;
color: teal;
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(){
$("h2").siblings("p").css({"color": "red", "border": "2px solid red"});
});
</script>
</head>
<body class="test">
<div>div (parent)
<p>p</p>
<span>span</span>
<h2>h2</h2>
<h3>h3</h3>
<p>p</p>
</div>
</body>
</html>
ফলাফল
next() মেথড
next() মেথডের মাধ্যমে কোনো এলিমেন্টের পরবর্তী সহোদর এলিমেন্টকে সিলেক্ট করা যায়।
নিচের উদাহরণে <h2> এলিমেন্টের পরবর্তী সহোদর এলিমেন্টকে সিলেক্ট করেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরি উদাহরণ</title>
<style>
.test * {
display: block;
border: 2px solid teal;
color: teal;
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(){
$("h2").next().css({"color": "green", "border": "2px solid green"});
});
</script>
</head>
<body class="test">
<div>div (parent)
<p>p</p>
<span>span</span>
<h2>h2</h2>
<h3>h3</h3>
<p>p</p>
</div>
</body>
</html>
ফলাফল
nextAll() মেথড
nextAll() মেথডের মাধ্যমে কোনো এলিমেন্টের পরবর্তী সকল সহোদর এলিমেন্টকে সিলেক্ট করা যায়।
নিচের উদাহরণে <h2> এর পরবর্তী সকল সহোদর এলিমেন্টকে সিলেক্ট করেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরি উদাহরণ</title>
<style>
.test * {
display: block;
border: 2px solid teal;
color: teal;
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(){
$("h2").nextAll().css({"color": "red", "border": "2px solid red"});
});
</script>
</head>
<body class="test">
<div>div (parent)
<p>p</p>
<span>span</span>
<h2>h2</h2>
<h3>h3</h3>
</div>
</body>
</html>
ফলাফল
nextUntil() মেথড
nextUntil() মেথডের মাধ্যমে দুটি আর্গুমেন্টের মধ্যবর্তী সকল সহোদর এলিমেন্টকে সিলেক্ট করা যায়।
নিচের উদাহরণে <h2> এবং <h6> এর মধ্যবর্তী সকল সহোদর এলিমেন্টকে সিলেক্ট করে:
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরি উদাহরণ</title>
<style>
.test * {
display: block;
border: 2px solid teal;
color: teal;
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(){
$("h2").nextUntil("h6").css({"color": "red", "border": "2px solid red"});
});
</script>
</head>
<body class="test">
<div>div (parent)
<p>p</p>
<span>span</span>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
<p>p</p>
</div>
</body>
</html>
ফলাফল
prev(), prevAll() এবং prevUntil() মেথড
prev(), prevAll() এবং prevUntil() মেথডগুলি উপরের মেথডগুলির মতই। কিন্তু এগুলো উল্টোদিকে কাজ করে। অর্থাৎ এই মেথডগুলির মাধ্যমে পেছনের সহোদর এলিমেন্টগুলোকে সিলেক্ট করা হয়। অথচ উপরের মেথডগুলোর মাধ্যমে সামনের সহোদর এলিমেন্ট গুলোকে সিলেক্ট করা হয়েছিল।
জেকুয়েরি ট্রাভার্সিং রেফারেন্স
জেকুয়েরি ট্রাভার্সিং-এর সবগুলো মেথড জানার জন্য আমাদের জেকুয়েরি ট্রাভার্সিং রেফারেন্স পেজে ভিজিট করুন।