JQUERY - DOM TRAVERSINGjQuery is a very powerful tool which provides a variety of DOM traversal methods to help us select elements in a 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. Find Elements by Index Consider a 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> This will produce the following result:
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> This will produce the following result
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> This will produce the following result:
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() { $("p").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> This will produce the following result
This is 1st paragraph and THIS IS RED
This is 2nd paragraph and THIS IS ALSO RED JQuery DOM Filter Methods Following table lists down useful methods which you can use to filter out various elements from a list of DOM elements:
The eq( index ) method reduces the set of matched elements to a single element. Syntax Here is the simple syntax to use this method:
selector.eq( index )
Parameters Here is the description of all the parameters used by this method:
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> This would produce the following result:
list item 1
list item 2 list item 3 list item 4 list item 5 list item 6 filter( selector ) Method The filter( selector ) method filters all elements from the set of matched elements that do not match the specified selector(s). Syntax Here is the simple syntax to use this method:
selector.filter( selector )
Parameters Here is the description of all the parameters used by this method:
Following is an example showing a simple usage of this method:
<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> This would produce the following result:
filter( fn ) Method The filter( fn ) method filters all elements from the set of matched elements that do not match the specified function. Syntax Here is the simple syntax to use this method:
selector.filter( selector )
Parameters Here is the description of all the parameters used by this method:
Following is an example showing a simple usage of this method:
<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(function (index) { return index == 1 || $(this).attr("class") == "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> This would produce the following result:
list item 1
list item 2 list item 3 list item 4 list item 5 list item 6 is( selector ) Method The is( selector ) method checks the current selection against an expression and returns true, if at least one element of the selection fits the given selector. If no element fits, or the selector is not valid, then the response will be 'false'. Syntax Here is the simple syntax to use this method:
element.is( selector )
Parameters Here is the description of all the parameters used by this method:
Following is an example showing a simple usage of this method:
<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").click(function () { if ($(this).is(":first-child")) { $("p").text("This is list item 1"); } else if ($(this).is(".middle0,.middle1")) { $("p").text("This is middle class list"); } else if ($(this).is(":contains('item 5')")) { $("p").text("It's 5th list"); } }); }); </script> <style> .selected { color:red; } </style> </head> <body> <div> <span>Click any list item below:</span> <ul> <li class="top0">list item 1</li> <li class="top1">list item 2</li> <li class="middle0">list item 3</li> <li class="middle1">list item 4</li> <li class="bottom0">list item 5</li> <li class="bottom1">list item 6</li> </ul> <p>FILLER</p> </div> </body> </html> This would produce the following result:
Click any list item below:
list item 1 list item 2 list item 3 list item 4 list item 5 list item 6 FILLER map( callback ) Method The map( callback ) method translates a set of elements in the jQuery object into another set of values in a jQuery array which may, or may not contain elements. You could use this method to build lists of values, attributes, css values - or even perform special, custom, selector transformations. Syntax Here is the simple syntax to use this method:
selector.map( callback )
Parameters Here is the description of all the parameters used by this method:
Following is a simple example showing the usage of this method:
<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(){ var mappedItems = $("li").map(function (index) { var replacement = $("<li>").text($(this).text()).get(0); if (index == 0) { // make the first item all caps $(replacement).text($(replacement).text().toUpperCase()); } else if (index == 1 || index == 3) { // delete the second and fourth items replacement = null; } else if (index == 2) { // make two of the third item and add some text replacement = [replacement,$("<li>").get(0)]; $(replacement[0]).append("<b> - A</b>"); $(replacement[1]).append("Extra <b> - B</b>"); } // replacement will be an dom element, null, // or an array of dom elements return replacement; }); $("#results").append(mappedItems); }); </script> <style> body { font-size:16px; } ul { float:left; margin:0 30px; color:blue; } #results { color:red; } </style> </head> <body> <ul> <li>First</li> <li>Second</li> <li>Third</li> <li>Fourth</li> <li>Fifth</li> </ul> <ul id="results"> </ul> </body> </html> This will produce the following result:
The not( selector ) method filters out all the elements matching the specified selector from the set of matched elements. Syntax Here is the simple syntax to use this method:
selector.not( selector )
Parameters Here is the description of all the parameters used by this method:
Following is a simple example showing the usage of this method:
<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").not(".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> This would produce the following result:
list item 1
list item 2 list item 3 list item 4 list item 5 list item 6 slice( start, end ) Method The slice( start, end ) method selects a subset of the matched elements. Syntax Here is the simple syntax to use this method:
selector.slice( start, end )
Parameters Here is the description of all the parameters used by this method:
Following is a simple example showing the usage of this method:
<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").slice(2, 5).addClass("selected"); }); </script> <style> .selected { color:red; } </style> </head> <body> <div> <ul> <li class="above">list item 0</li> <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> <li class="below">list item 7</li> </ul> </div> </body> </html> This would produce the following result:
list item 0
list item 1 list item 2 list item 3 list item 4 list item 5 list item 6 list item 7 JQuery DOM Traversing Methods Following table lists down other useful methods which you can use to locate various elements in a DOM:
The add( selector ) method adds more elements, matched by the given selector, to the set of matched elements. Syntax Here is the simple syntax to use this method:
selector.add( selector )
Parameters Here is the description of all the parameters used by this method:
Following is a simple example showing the usage of this method:
<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() { $(".top").add(".middle").addClass("selected"); }); </script> <style> .selected { color:red; } </style> </head> <body> <div> <ul> <li class="above">list item 0</li> <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> <li class="below">list item 7</li> </ul> </div> </body> </html> This would produce the following result:
list item 0
list item 1 list item 2 list item 3 list item 4 list item 5 list item 6 list item 7 andSelf( ) Method The andSelf( ) method adds the previous selection to the current selection. The method is useful when you have multiple trasversals in your script and then adding something that was matched before the last traversal. Syntax Here is the simple syntax to use this method:
selector.andSelf( )
Parameters Here is the description of all the parameters used by this method:
Following is a simple example showing the usage of this method:
<html>
<head> <title>the title</title> <script type="text/javascript" src="/jquery/jquery-1.3.2.min.js"></script> <script> $(document).ready(function(){ $("div").find("p").andSelf().addClass("border"); }); </script> <style> p, div { margin:5px; padding:5px; } .border { border: 2px solid red; } .background { background:yellow; } </style> </head> <body> <div> <p>First Paragraph</p> <p>Second Paragraph</p> </div> </body> </html> Here border would be added to previous selection which is a division and then second selection which is paragraphs, as shown below −
The children( [selector] ) method gets a set of elements containing all of the unique immediate children of each of the matched set of elements. Syntax Here is the simple syntax to use this method:
selector.children( [selector] )
Parameters Here is the description of all the parameters used by this method:
Following is a simple example showing the usage of this method:
<html>
<head> <title>the title</title> <script type="text/javascript" src="/jquery/jquery-1.3.2.min.js"></script> <script> $(document).ready(function(){ $("div").children(".selected").addClass("blue"); }); </script> <style> .blue { color:blue; } </style> </head> <body> <div> <span>Hello</span> <p class="selected">Hello Again</p> <div class="selected">And Again</div> <p class="biggest">And One Last Time</p> </div> </body> </html> This would produce following result. This would apply blue color to all children with a class "selected" of each div.
Hello
Hello Again And Again And One Last Time closest( selector ) Method The closest( selector ) method works by first looking at the current element to see if it matches the specified expression, if so it just returns the element itself. If it doesn't match then it will continue to traverse up the document, parent by parent, until an element is found that matches the specified expression. If no matching element is found then none will be returned. Syntax Here is the simple syntax to use this method:
selector.children( [selector] )
Parameters Here is the description of all the parameters used by this method:
Following is a simple example showing the usage of this method:
<html>
<head> <title>the title</title> <script type="text/javascript" src="/jquery/jquery-1.3.2.min.js"></script> <script> $(document).ready(function(){ $(document).bind("click", function (e) { $(e.target).closest("li").toggleClass("highlight"); }); }); </script> <style> .highlight { color:red; background: yellow; } </style> </head> <body> <div> <p>Click any item below to see the result:</p> <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> This will produce the the following result:
Click any item below to see result:
list item 1 list item 2 list item 3 list item 4 list item 5 list item 6 contents( ) Method The contents( ) method finds all the child nodes inside the matched elements (including text nodes), or the content document, if the element is an iframe. Syntax Here is the simple syntax to use this method:
selector.contents( )
Parameters Here is the description of all the parameters used by this method:
Consider you have a blank html file index-blank.htm which we would use in an iframe. Try the following example which shows how you can access the objects in an iframe from a parent window. This operation has become possible just because of contents() method.
<html>
<head> <title>the title</title> <script type="text/javascript" src="/jquery/jquery-1.3.2.min.js"></script> <script> $(document).ready(function(){ var $content = $("iframe").contents(); $content.find("body").append("I'm in an iframe!"); }); </script> </head> <body> <iframe src="/jquery/index-blank.htm" width="300" height="100"> </iframe> </body> </html> end( ) Method The end( ) method reverts the most recent destructive operation, changing the set of matched elements to its previous state right before the destructive operation. Syntax Here is the simple syntax to use this method:
operations.end( )
Parameters Here is the description of all the parameters used by this method:
Following is a simple example showing the usage of this method. This selects all paragraphs, finds span elements inside these, and reverts the selection back to the paragraphs.
<html>
<head> <title>the title</title> <script type="text/javascript" src="/jquery/jquery-1.3.2.min.js"></script> <script> $(document).ready(function(){ $("p").find("span").end().css("border", "2px red solid"); }); </script> <style> p{ margin:10px; padding:10px; } </style> </head> <body> <p><span>Hello</span>, how are you?</p> </body> </html> This will produce the following result:
Hello how are you
find( selector ) Method The find( selector ) method searches for descendent elements that match the specified selector. Syntax Here is the simple syntax to use this method:
selector.find( selector )
Parameters Here is the description of all the parameters used by this method:
Following is a simple example showing the usage of this method.
<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() { $("p").find("span").addClass("selected"); }); </script> <style> .selected { color:red; } </style> </head> <body> <div> <p><span>Hello</span>, how are you?</p> <p>Me? I'm <span>good</span>.</p> </div> </body> </html> This would produce the following result.
Hello, how are you?
Me? I'm good. next( [selector] ) Method The next( [selector] ) method gets a set of elements containing the unique next siblings of each of the given set of elements. Syntax Here is the simple syntax to use this method:
selector.next( [selector] )
Parameters Here is the description of all the parameters used by this method:
Following is a simple example showing the usage of this method. Try this example without passing selector in next() method:
<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(){ $("p").next(".selected").addClass("hilight"); }); </script> <style> .hilight { background:yellow; } </style> </head> <body> <p>Hello</p> <p class="selected">Hello Again</p> <div><span>And Again</span></div> </body> </html> This would produce the following result.
Hello
Hello Again And AgainnextAll( [selector] ) Method The nextAll( [selector] ) method finds all sibling elements after the current element. Syntax Here is the simple syntax to use this method:
selector.nextAll( [selector] )
Parameters Here is the description of all the parameters used by this method:
Following is a simple example showing the usage of this method:
<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(){ $("div:first").nextAll().addClass("hilight"); }); </script> <style> .hilight { background:yellow; } </style> </head> <body> <div>first</div> <div>sibling<div>child</div></div> <div>sibling</div> <div>sibling</div> </body> </html> This would produce the following result.
first
offsetParent() Methodsibling child sibling sibling The offsetParent() method returns a positioned parent (e.g. relative, absolute) of the first selected element. Syntax Here is the simple syntax to use this method:
selector.offsetParent()
Parameters Here is the description of all the parameters used by this method:
Following is a simple example showing the usage of this method.
<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(){ $("p").offsetParent().addClass('hilight'); }); </script> <style> .hilight { background:yellow; } </style> </head> <body> <scan>Top Element</scan> <div style="position:relative;"> <div>sibling<div>child</div></div> <p>sibling</p> <scan>sibling <div> </body> </html> This would produce the following result.
Top Element
sibling child sibling sibling parent( [selector] ) Method The parent( [selector] ) method gets the direct parent of an element. If called on a set of elements, parent returns a set of their unique direct parent elements. Syntax Here is the simple syntax to use this method:
selector.parent( [selector] )
Parameters Here is the description of all the parameters used by this method:
Following is a simple example showing the usage of this method.
<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(){ $("p").parent().addClass('hilight'); }); </script> <style> .hilight { background:yellow; } </style> </head> <body> <scan>Top Element</scan> <div"> <div>sibling<div>child</div></div> <p>sibling</p> <scan>sibling <div> </body> </html> This would produce the following result.
Top Element
parents( [selector] ) Methodsibling child sibling sibling The parents( [selector] ) method gets a set of elements containing the unique ancestors of the matched set of elements except for the root element. Syntax Here is the simple syntax to use this method:
selector.parents( [selector] )
Parameters Here is the description of all the parameters used by this method:
Following is a simple example showing the usage of this method. Try this example by passing parent selector like ".top".
<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(){ var parentEls = $("p").parents() .map(function () { return this.tagName; }).get().join(", "); $("b").append("<strong>" + parentEls + "</strong>"); }); </script> <style> .hilight { background:yellow; } </style> </head> <body> <scan>Top Element</scan> <div> <div class="top">Top division <p class="first">First Sibling</p> <scan>Second sibling</scan> <p class="third">Third sibling</p> </div> <b>My parents are: </b> <div> </body> </html> This would produce the following result.
Top Element
Top division First Sibling Second sibling Third sibling Parents of <p> elements are: DIV, DIV, BODY, HTML prev( [selector] ) Method The prev( [selector] ) method gets the immediately preceding sibling of each element in the set of matched elements, optionally filtered by a selector. Syntax Here is the simple syntax to use this method:
selector.prev( [selector] )
Parameters Here is the description of all the parameters used by this method:
Following is a simple example showing the usage of this method. Try this example without passing selector in prev() method:
<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(){ $("p").prev(".selected").addClass("hilight"); }); </script> <style> .hilight { background:yellow; } </style> </head> <body> <div><span>Hello</span></div> <p class="selected">Hello Again</p> <p>And Again</p> </body> </html> This would produce the following result.
Hello
Hello Again And Again prevAll( [selector] ) Method The prevAll( [selector] ) method finds all sibling elements in front of the current element. Syntax Here is the simple syntax to use this method:
selector.prevAll( [selector] )
Parameters Here is the description of all the parameters used by this method:
Following is a simple example showing the usage of this method:
<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(){ $("div:last").prevAll().addClass("hilight"); }); </script> <style> .hilight { background:yellow; } </style> </head> <body> <div>first</div> <div>sibling<div>child</div></div> <div>sibling</div> <div>sibling</div> </body> </html> This would produce the following result.
Hello
Hello Again And Again siblings( [selector] ) Method The siblings( [selector] ) method gets a set of elements containing all of the unique siblings of each of the matched set of elements. Syntax Here is the simple syntax to use this method:
selector.siblings( [selector] )
Parameters Here is the description of all the parameters used by this method:
Following is a simple example showing the usage of this method:
<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(){ $("p").siblings('.selected').addClass("hilight"); }); </script> <style> .hilight { background:yellow; } </style> </head> <body> <div><span>Hello</span></div> <p class="selected">Hello Again</p> <p>And Again</p> </body> </html> This would produce the following result.
Hello
Hello Again And Again |
copyright © 2014 - all rights riserved by javatechnologycenter.com