Reading list Switch to dark mode

    jQuery Traversing

    Updated 19 June 2017

    In this blog we will learn about jQuery Traversing.
    jQuery traversing are used to find or select HTML elements. For example if you want to select data just after the selector, or select grand data of selector, or select children data of selector or if you want to select children element of selector then you can select by the use of traversing.
    There are many types of traversing but basically there three types of traversing:-
    1) Parent
    2) Children
    3) Siblings

    Lets see example:

    In this example we have made some colorful  div assigned as Great grand parent, Grand parent, Parent, children. In this example we will see how by selecting one div we will select other div. Check output after each example.

    <html>
    	<head>
    		 <title>JQuery Traversing</title>
    		 <script type = "text/javascript"
    				src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    				<script type = "text/javascript" language = "javascript">
    				   $(document).ready(function() {
    				      $(".children").append('(Selected Selector)');
    				      //here you have selected children as your selector. check the effect below
    				   });
    				</script>
    		 <style>
    				.traversing {
    				 background: gray;
    				 padding: 10px;
    				 width:300px;
    				 height:300px;
    				}
    				.grandparent_parents {
    				 background: yellow;
    				 padding: 10px;
    				 width:250px;
    				 height:250px;
    				}
    				.grandparent {
    				 background: green;
    				 padding: 10px;
    				 width:200px;
    				 height:200px;
    				}
    				.parent {
    				 background: white;
    				 padding: 10px;
    				 width:150px;
    				 height:150px;
    				}
    				.children {
    				 background: brown;
    				 padding: 10px;
    				 width:100px;
    				 height:100px;
    				}
    		 </style>
    	</head>
    	<body>
    		 <div class="traversing">
    				<div class="grandparent_parents">Great Grand Parent
    					<div class="grandparent">Grand Parent
    						<div class="parent">Parent
    						 <div class="children">Children
    						</div>
    						</div>
    					</div>
    				</div>
    		 </div>
    	</body>
    </html>
    

    Above we have selected children as the selector therefore the text is coming inside the Children div.

    Start your headless eCommerce
    now.
    Find out More

    Now change only script section from above written code for next example.

    <script type = "text/javascript" language = "javascript">
      $(document).ready(function() {
         $(".children").parent().append('(Selected Selector)');
         //here your selector is $(".children").parent(). check the effect below
      });
    </script>

    Here we have selected parent of children and parent of children is white section therefore the text is coming inside the white section.

    Now change only script section from above written code for next example.

    <script type = "text/javascript" language = "javascript"> 
     $(document).ready(function() { 
      $(".children").parents().append('(Selected Selector)<br>'); 
      //here your selector is $(".children").parents(). check the effect below 
     }); 
    </script>


    Here we have selected selector as parents of children and parents of children are white,green,yellow,gray and even main div  therefore the text is coming inside the all the section.

    Now change only script section from above written code for next example.

    <script type = "text/javascript" language = "javascript">
     $(document).ready(function() {
      $(".children").parents('.grandparent_parents').append('(Selected Selector)');
      //here your selector is $(".children").parents('grandparant_parents'). check the effect below
     });
    </script>
    
    

    Here we have selected selector as  $(“.children”).parents(‘.grandparent_parents’) means children parents whose class is grandparent_parents therefore the text is coming inside yellow section because yellow section class is grandparent_parents.

    Now change only script section from above written code for next example.

    <script type = "text/javascript" language = "javascript">
       $(document).ready(function() {
          $(".children").parentsUntil('.grandparent_parents').append('(Selected Selector)');
          //here your selector is $(".children").parents() now check the effect untill you get the parent whose calss is grandparent_parents the effect will come
       });
    </script>


    Here we have selected selector as  $(“.children”).parentsUntil(‘.grandparent_parents’) means all the parent will be selected Until you get the Grand parent.

    So here we ends with some example of jQuery traversing.

    . . .

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    Be the first to comment.

    Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home