Easiest way to learn various technology

5/06/2018

Jquery Siblings

what is jquery Siblings
in general life siblings are different from this siblings so don't confuse,
ok now let us detail example of siblings

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>let us see what is siblings</title>
<style>
ul {
    float: left;
    margin: 15px;
    font-size: 6px;
    font-weight: bold;
}
p {
    color: blue;
    margin: 1px 2px;
    font-size: 5px;
    padding: 5px;
    font-weight: bold;
}
.abc {
    background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery.min.js"></script>
</head>
<body>

<ul>
<li>One</li>
<li>Two</li>
<li class="abc">Three</li>
<li>Four</li>
</ul>

<p>Unique siblings: <b></b></p>

<script>
var anytemp = $( ".abc" ).siblings().css( "color", "red" ).length;
$(".ab").text(anytemp);
</script>

</body>
</html>

in above example use anytemp variable after find siblings we append anytemp variable to ab div.
in short siblings,
1. get all related siblings
2. apply style to relevant siblings
3. this is traversing sideways.
4. can get all previous & next value of parent div

in following image shows detail of how siblings & traversing work & affect.