---
title: "JQuery Traversal Method"  
description: "In this article I have tried to explain the JQuery Traversal methods."  
author: "Vijay Shukla"  
published: 2012-12-29  
updated: 2019-09-07  
canonical: https://www.mindstick.com/articles/1098/jquery-traversal-method  
category: "jquery"  
tags: ["jquery"]  
reading_time: 2 minutes  

---

# JQuery Traversal Method

In this [article](https://yourviews.mindstick.com/view/81489/kashmir-now-after-an-year-of-abrogation-of-article-370) I have tried to [explain](https://www.mindstick.com/forum/159699/what-is-a-compilation-error-in-dot-net-core-explain-with-an-example) the JQuery Traversal [methods](https://www.mindstick.com/articles/13060/runny-nose-remedy-methods-that-work-best).\

JQuery is a very great tool which provides a many types of DOM traversal methods which help us [select elements](https://www.mindstick.com/forum/157817/how-do-you-select-elements-using-jquery-can-you-provide-some-examples) in a [document](https://www.mindstick.com/articles/328642/what-to-consider-while-choosing-a-software-documentation-tool) randomly [as well as](https://www.mindstick.com/forum/156547/difference-between-max-width-and-width-as-well-as-max-height-and-height) in [sequential](https://www.mindstick.com/interview/23447/what-are-the-different-methods-for-sequential-supervised-learning) method.

##### Find Elements by index:

Below every item has its own index and we can located direct with the help of eq(index) method.

##### Script:

```
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
   <script type="text/javascript">
      $(document).ready(function() {
      $("li").eq(2).addClass("selected");
        });
   </script>
```

##### Style:

```
<style>
      .selected { color:red; }
      .highlight { background:yellow; }
  </style>
```

##### HTML Code:

```
<ul>
     <li> item 1</li>
     <li> item 2</li>
     <li> item 3</li>/*This item is second index of this list*/
     <li>item 4</li>
</ul>
```

##### Output:

![JQuery Traversal Method](https://www.mindstick.com/mindstickarticle/83f5628c-eae7-4030-a9a7-2eadc42deb5b/images/e52f824b-4c4e-4be5-9cfd-048df5625ad1.png)

##### Find Elements by its class name:

Below is filtering the element via class name and set the style of those elements.

##### Script:

```
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
   <script type="text/javascript">
      $(document).ready(function() {
      $("li").filter(".top").addClass("selected");
      $("li").filter(".middle").addClass("highlight");
        });
   </script>
```

HTML Code:

```
   <ul>
     <li class="top">list item 1</li>
     <li class="top">list item 2</li>
     <li class="middle">list item 3</li>
     <li class="middle">list item 4</li>
</ul>
```

##### Output:

![JQuery Traversal Method](https://www.mindstick.com/mindstickarticle/83f5628c-eae7-4030-a9a7-2eadc42deb5b/images/8e61aa42-d13d-4624-9f32-58ed1d8e87e8.png)

##### Locating Tag:

Below find and filter the tag and apply the style those elements.

##### Script:

```
   <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
   <script type="text/javascript">
      $(document).ready(function() {
           $("p").find("span").addClass("selected");
           $("p").filter(".paragraph").addClass("highlight");
   });
```

##### HTML Code:

<p class="paragraph">This is <span>[Mindstick](https://yourviews.mindstick.com/story/1230/top-beneficial-service-pages-of-mindstick-company)</span></p>

##### Output:

![JQuery Traversal Method](https://www.mindstick.com/mindstickarticle/83f5628c-eae7-4030-a9a7-2eadc42deb5b/images/16ead3bf-9f0f-42a8-8193-3ed8e5c9dde0.png)

\

---

Original Source: https://www.mindstick.com/articles/1098/jquery-traversal-method

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.