jQuery

LEVEL - LEARNER Session 9 Traversing in jQuery

C3: Protected

About the Author

Created By: Credential Information: Version and Date: Jeevitha Arumugam, 188913 .Net 2.0 SQL SERVER2005 - 3 Years V1.0- 06/11/2011

2007, Cognizant Technology Solutions

Confidential

Icons Used
Hands on Exercise

Questions

Tools

Coding Standards

Test Your Understanding

Reference

Demonstration

A Welcome Break

Contacts

2007, Cognizant Technology Solutions

Confidential

jQuery Traversing Overview

jQuery traversing provides variety of DOM traversal methods to help us

select elements in a document randomly as well as in sequential method

They are used to filter out elements from a document based on given

conditions.
We can traverse the DOM using the following three building blocks while

selecting elements in a given document

$(TagName) $(#Tag ID) $(.Tag Class)

2007, Cognizant Technology Solutions

Confidential

jQuery : Objectives
Objective:
After completing this chapter you will be able to: Define Traversing. Describe the functions available in Traversing .

2007, Cognizant Technology Solutions

Confidential

jQuery - Traversing
jQuery provides various traversal methods to select elements randomly or in

sequential method. eq(index) method - Index starts its count from 0. Example: $("li").eq(2) <ul> <li>list item 1</li> <li>list item 2</li> </ul>

2007, Cognizant Technology Solutions

Confidential

jQuery Traversing (contd.)

Filter(Selector) method

Example: $("li").filter(".middle").addClass("selected") <style> .selected { color:red; } </style> <ul> <li class="top">list item 1</li> <li class="middle">list item 3</li> <li class="bottom">list item 5</li> </ul>

2007, Cognizant Technology Solutions

Confidential

jQuery Traversing (contd.)

Find(selector) method - To locate all the descendent elements of a particular

type of elements
Example: $("p").find("span").addClass("selected")

<style> .selected { color:red; } </style> <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>

2007, Cognizant Technology Solutions

Confidential

jQuery Traversing (contd.)

Filter(Selector) method

Example: $("li").filter(".middle").addClass("selected") <style> .selected { color:red; } </style> <ul> <li class="top">list item 1</li> <li class="middle">list item 3</li> <li class="bottom">list item 5</li>
</ul>

2007, Cognizant Technology Solutions

Confidential

jQuery Traversing (contd.)

Is(selector) method Checks the current selected item against asn expression

and returns true or false element.is( selector ) Example: $("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"); } });

2007, Cognizant Technology Solutions

Confidential

10

jQuery Traversing (contd.)

<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>

2007, Cognizant Technology Solutions

Confidential

11

jQuery Traversing (contd.)

map(callback) method translates a set of elements into another set of value

callback: The function to execute on each element in the set selector.map( callback ) Example: var mappedItems = $("li").map(function (index) { var replacement = $("<li>").text($(this).text()).get(0); if (index == 0) { $(replacement).text($(replacement).text().toUpperCase()); } else if (index == 1 || index == 3) { replacement = null; } else if (index == 2) { $(replacement[0]).append("<b> - A</b>"); $(replacement[1]).append("Extra <b> - B</b>"); } return replacement; }); $("#results").append(mappedItems);
2007, Cognizant Technology Solutions Confidential 12

jQuery Traversing (contd.)

<ul> <li>First</li> <li>Second</li> <li>Third</li> <li>Fourth</li> <li>Fifth</li> </ul> <ul id="results"> </ul>
Not(selector) method filters out all the elements matching the specified

selector from the set of matched elements Selector can be multiple to apply multiple filters selector.not( selector )

2007, Cognizant Technology Solutions

Confidential

13

jQuery Traversing (contd.)

Example: $("li").not(".middle").addClass("selected) <style> .selected { color:red; } </style> <ul> <li class="top">list item 1</li> <li class="middle">list item 2</li> <li class="bottom">list item 3</li> </ul> Result: <ul> <li class=selected">list item 1</li> <li class="middle">list item 2</li> <li class=selected">list item 3</li> </ul>
2007, Cognizant Technology Solutions Confidential 14

jQuery Traversing (contd.)

slice( start, end ) method selects a subset of the matched elements

selector.slice( start, end )

Example: $("li").slice(2,3).addClass("selected") <style> .selected { color:red; } </style> <ul> <li class="top">list item 1</li> <li class="middle">list item 2</li> <li class="bottom">list item 3</li> </ul>

2007, Cognizant Technology Solutions

Confidential

15

jQuery Traversing (contd.)

Result: <ul> <li class=top">list item 1</li> <li class=middle">list item 2</li> <li class=selected">list item 3</li> </ul>
andSelf( ) method adds the previous selection to the current selection

selector.andSelf( ) Example: $("div").find("p").andSelf().addClass("border")

2007, Cognizant Technology Solutions

Confidential

16

jQuery Traversing (contd.)

<style> p, div { margin:5px; padding:5px; } .border { border: 2px solid red; } </style> <div> <p>First Paragraph</p> <p>Second Paragraph</p> </div> Result: <div class="border"> <p class="border">First Paragraph</p> <p class="border">Second Paragraph</p> </div>
2007, Cognizant Technology Solutions Confidential 17

jQuery

Time for a Break !

2007, Cognizant Technology Solutions

Confidential

18

jQuery
Questions from participants

2007, Cognizant Technology Solutions

Confidential

19

Test Your Understanding

What is a Traversing?

What is Filter(Selector) method funtion used for?

2007, Cognizant Technology Solutions

Confidential

20

jQuery :Summary
From this session, we have seen various methods
To traverse DOM elements up or down in random or sequential method To filter the DOM elements based on some condition To select subset of the DOM elements

2007, Cognizant Technology Solutions

Confidential

21

<RIO Name>: Source

http://docs.jquery.com/Main_Page

http://www.w3schools.com/jquery/default.asp
http://weblogs.asp.net/scottgu/archive/2008/09/28/jquery-

and-microsoft.aspx

Disclaimer: Parts of the content of this course is based on the materials available from the Web sites and books listed above. The materials that can be accessed from linked sites are not maintained by Cognizant Academy and we are not responsible for the contents thereof. All trademarks, service marks, and trade names in this course are the marks of the respective owner(s).
2007, Cognizant Technology Solutions Confidential 22

You have successfully completed Session 9 of jQuery

Click here to proceed