Of Stack

Examples of jQuery's upward traversal downward traversal and horizontal traversal of DOM elements

  • 2021-07-02 23:00:32
  • OfStack

1. Downward traversal of jQuery 


<script src="../JS/Extend.js"></script>
 <script src="../JS/my.js"></script>
 <link type="text/css" rel="stylesheet" href="../CSS3/my.css">

</head>
<body>
<div id="div1">
 <div id="div2">
  <p id="p1">
   <a>hello world</a>
  </p>
 </div>
</div>

#div1{
 width:500px;
 height:200px;
 border:3px solid coral;
}

#div2{
 width:400px;
 height:150px;
 margin-top:10px;
 margin-left:10px;
 border: 3px solid coral;
}

#p1{
 margin-left:10px;
 margin-top:10px;
 width:150px;
 height:80px;
 border:3px solid coral;
}

1. Element traversal of children () method 


$(document).ready( function (){
 $("#div1").children().css({border:"3px solid black"});
});

You can see that the border color of div2, the son of div1, has changed to black.

2. Element traversal of find () method 


$(document).ready( function (){
 $("#div1").find("a").css({border:"3px solid grey"});
});

You can see that the a element, the great grandson of div1, has a gray border. ,

The difference between. children () and. find () methods is that children can modify only the child elements of an element, while find can modify all its child elements.

2. Upward traversal of jQuery
As the name implies, traversing up is to find the parent set from the subset. 


.parent()
$(document).ready( function (){
 $("#div2").parent().css({border:"3px solid black"});
 });

The border of div1, the parent element of div2, has changed 


.parents()
$(document).ready( function (){
 $("a").parents().css({border:"3px solid grey"});
});

Except for the a element, all the parent elements of the a element have changed 


.parentUntil()
$(document).ready( function (){
  $("a").parentsUntil("#div1").css({border:"3px solid grey"})
});

The element border changes from the a element to the element before the div1 element.

The difference between the three methods is that. parent () can only traverse one layer up; . parents () can then specify the id of the parent element for spanning traversal; . parentUntil () has the property of an interval and will traverse all elements contained in the interval.

3. Traversal-siblings (brothers)
Sibling elements have the same parent element.

Traverses horizontally in the DOM tree.

There are many useful ways for us to traverse the DOM tree horizontally:

siblings() next() nextAll() nextUntil() prev() prevAll() prevUntil()

1.JQuery siblings()

The siblings () method returns all siblings of the selected element. 


<section>
 <h1> Article's <span> Title </span> La </h1>
 <p> Content of the article content content content content content </p>
 <p> End part </p>
</section>


$(document).ready(function () {
 //  Get h1 All sibling elements of the tag 
 var elem = $('h1').siblings();
 console.log(elem); // p p 
});

2.JQuery next()

The next () method returns the next sibling element of the selected element 


<section>
 <h1> Article's <span> Title </span> La </h1>
 <p> Content of the article content content content content content </p>
 <p> End part </p>
</section>


$(document).ready(function () {
 //  Get h1 Below the label 1 Sibling elements 
 var elem = $('h1').next();
 console.log(elem); // p
});

3.JQuery nextAll()

The nextAll () method returns all sibling elements that follow the selected element. 


$(document).ready( function (){
 $("#div1").children().css({border:"3px solid black"});
});
0 

$(document).ready( function (){
 $("#div1").children().css({border:"3px solid black"});
});
1

4.JQuery nextUntil()

The nextUntil () method returns all following sibling elements between two given parameters. 


$(document).ready( function (){
 $("#div1").children().css({border:"3px solid black"});
});
2 

$(document).ready(function () {
 //  Get 
 var elem = $('h1').nextUntil('h2');
 console.log(elem); // p p 
});

5.JQuery prev() & prevAll() & prevUntil()

The prev (), prevAll (), and prevUntil () methods work similarly to the above methods, except in the opposite direction: They return the preceding sibling elements (traversing backward along sibling elements in the DOM tree, not forward).

Related articles: