jQuery Siblings()
jQuery siblings() Method
The siblings() method is used to get the sibling elements of the selected element. The sibling elements are share the same parent.
Example of Code
<style>
.example-jquery-siblings-siblings * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".example-jquery-siblings-siblings-var").siblings().css({"color": "red", "border": "2px solid red"});
});
</script>
</head>
<div class="example-jquery-siblings-siblings">
<article>article tag</article>
<var class="example-jquery-siblings-siblings-var">variable tag</var>
<article >article tag</article>
<article>article tag</article>
<blockquote>blockquote tag</blockquote>
</div>
Output
article tag variable tagarticle tag article tag blockquote tag
jQuery next() Method
The next() method returns the next sibling element of the selected element.
Example of Code
<style>
.example-jquery-siblings-next * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".example-jquery-siblings-next-var").next().css({"color": "red", "border": "2px solid red"});
});
</script>
</head>
<div class="example-jquery-siblings-next">
<article>article tag</article>
<var class="example-jquery-siblings-next-var">variable tag</var>
<article >article tag</article>
<article>article tag</article>
<blockquote>blockquote tag</blockquote>
</div>
Output
article tag variable tagarticle tag article tag blockquote tag
jQuery nextAll() Method
The nextAll() method returns all next sibling elements of the selected element.
Example of Code
<style>
.example-jquery-siblings-nextAll * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".example-jquery-siblings-nextAll-var").nextAll().css({"color": "red", "border": "2px solid red"});
});
</script>
</head>
<div class="example-jquery-siblings-nextAll">
<article>article tag</article>
<var class="example-jquery-siblings-nextAll-var">variable tag</var>
<article >article tag</article>
<article>article tag</article>
<blockquote>blockquote tag</blockquote>
</div>
Output
article tag variable tagarticle tag article tag blockquote tag
jQuery nextUntil()
The jQuery nextUntil() method is used to get all the following siblings up to but not including the element matched by the selector.Example of Code
<style>
.example-jquery-siblings-nextUntil * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".example-jquery-siblings-nextUntil-var").nextUntil(".example-jquery-siblings-nextUntil-blockquote").css({"color": "red", "border": "2px solid red"});
});
</script>
</head>
<div class="example-jquery-siblings-nextUntil">
<article>article tag</article>
<var class="example-jquery-siblings-nextUntil-var">variable tag</var>
<article >article tag</article>
<article>article tag</article>
<blockquote class="example-jquery-siblings-nextUntil-blockquote">blockquote tag</blockquote>
</div>
Output
article tag variable tagarticle tag article tag blockquote tag
jQuery prev()
The jQuery prev() method is used to get the previous sibling element of the selected element.
Example of Code
<style>
.example-jquery-siblings-prev * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".example-jquery-siblings-prev-var").prev().css({"color": "red", "border": "2px solid red"});
});
</script>
</head>
<div class="example-jquery-siblings-prev">
<article>article tag</article>
<var>variable tag</var>
<article>article tag</article>
<article class="example-jquery-siblings-prev-var">article tag</article>
<blockquote>blockquote tag</blockquote>
</div>
Output
article tag variable tagarticle tag article tag blockquote tag
jQuery prevAll()
The jQuery prevAll() method is used to get the all previous sibling elements of the selected element.
Example of Code
<style>
.example-jquery-siblings-prevAll * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".example-jquery-siblings-prevAll-var").prevAll().css({"color": "red", "border": "2px solid red"});
});
</script>
</head>
<div class="example-jquery-siblings-prevAll">
<article>article tag</article>
<var>variable tag</var>
<article>article tag</article>
<article class="example-jquery-siblings-prevAll-var">article tag</article>
<blockquote>blockquote tag</blockquote>
</div>
Output
article tag variable tagarticle tag article tag blockquote tag
jQuery prevUntil()
The jQuery prevUntil() method is used to get all the previous sibling elements of the selected element up to but not including the element matched by the selector.
Example of Code
<style>
.example-jquery-siblings-prevUntil * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".example-jquery-siblings-prevUntil-blockquote").prevUntil(".example-jquery-siblings-prevUntil-var").css({"color": "red", "border": "2px solid red"});
});
</script>
<div class="example-jquery-siblings-prevUntil">
<article>article tag</article>
<var class="example-jquery-siblings-prevUntil-var">variable tag</var>
<article>article tag</article>
<article >article tag</article>
<blockquote class="example-jquery-siblings-prevUntil-blockquote">blockquote tag</blockquote>
</div>
Output
article tag variable tagarticle tag article tag blockquote tag
- Free Project
- Stripe gateway integration demo with PHP