Traversing Sideways in The DOM Tree
There are many useful jQuery methods for traversing sideways in the DOM tree:
-
siblings()
-
next()
-
nextAll()
-
nextUntil()
-
prev()
-
prevAll()
-
prevUntil()
|
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>internal</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
</head>
<body>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$(".class1").find(".students").siblings().css("background-color","blue");
$(".class1"). find(".students").next().css("color","red");
$(".class1").find(".teachers").nextAll().css("font-size","30px");
$(".class1").find(".office").prev().css("font-weight","bold");
$(".class1").find(".office").prevAll().css("text-decoration","underline");
$(".class1").find(".office").parentsUntil().css("color","yellow");
});
});
</script>
<div width="500" height="300" style="background-color: orange;">
<div class="class1">
<ul class="teachers">
<li>Sarathy</li>
<li>Partha</li>
</ul>
<ul class="students">
<li>Siva</li>
<li>Ram</li>
</ul>
<ul class="office">
<li>Kala</li>
<li>JOhn</li>
</ul>
</div>
</div>
<button id="btn">click here</button>
</body>
</html> |
