Introduction
jQuery is a very powerful tool which provides a variety of DOM traversal methods to help us select elements in document randomly as well as in sequential method. Most of the DOM traversal methods do not modify the jquery object and they are used to filter out elements from a document based on given conditions.
Search Elements by Index:
Consider the simple document with the following HTML content:
<html> <head> <title>The title</title> </head> <body> <div> <ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li> <li>list item 6</li> </ul> </div> </body> </html>
- Above every list has its own index, and can be located directly by using eq(index) method as below example.
- Every child element starts its index from zero, thus, list item 2 would be accessed by using $(“li”).eq(1) and so on.
Example: Following is a simple example which adds the color to second list item.
<html>
<head>
<title>The Title</title>
<script type=”text/javascript” src=”/jquery/jquery-1.3.2.min.js”>
</script>
<script type=”text/javascript” language=”javascript”>
$(document).ready(function(){
$(“li”).eq(2).addclass(“selected”);
});
</script>
<style>
.selected{ color:red; }
</style>
</head>
<body>
<div>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
<li>list item 6</li>
</ul>
</div>
</body>
</html>
Filtering out Elements:
The filter(selector) method can be used to filter out all elements from the set of matched elements that do not match the specified selector(s). The selector can be written using any selector syntax.
Example: Following is a simple example which applies color to the lists associated with middle class:
<html> <head> <title>The Title</title> <script type=”text/javascript” src=”/jquery/jquery-1.3.2.min.js”> </script> <script type=”text/javascript” language=”javascript”> $(document).ready(function(){ $(“li”).filter(“.middle”).addclass(“selected”); }); </script> <style> .selected{ color:red; } </style> </head> <body> <div> <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> <li class=”bottom”>list item 5</li> <li class=”bottom”>list item 6</li> </ul> </div> </body> </html>
Locating Descendent Elements:
The find(selector) method can be used to locate all the descendent elements of a particular type of elements. The selector can be written using any selector syntax.
Example: Following is an example which selects all the <span> elements available inside different <p> elements:
<html> <head> <title>The Title</title> <script type=”text/javascript” src=”/jquery/jquery-1.3.2.min.js”> </script> <script type=”text/javascript” language=”javascript”> $(document).ready(function(){ $(“pi”).find(“span”).addclass(“selected”); }); </script> <style> .selected{ color:red; } </style> </head> <body> <p>This is 1st paragraph and <span>THIS IS RED</span></p> <p>This is 2nd paragraph and <span>THIS IS ALSO RED</span></p> </body> </html>
Comments/Suggestions are invited. Happy coding......!
Comments Post a Comment