jQuery
Traversing -
Traversing
( moving through ), are used to find ( or select ) HTML elements
based on their relation to other elements.
Level
1 - div
Level
2 - ul
Level
3 - li
Level
4 - span, b
Method
of Traversing DOM : tree-traversal
Ancestor
– is a parent, grandparent, great-grandparent
Traversing
up the DOM tree :
*
parent() - Returns the direct parent element of the selected
element. Traverse a single level up the DOM tree
ex:
$("span").parent().css({"color":"red","border":"2px
solid red"});
*
parents() - Returns all ancestor elements of the selected
element. All the way up to the document's root element (<html>).
ex:
$("span").parents().css({"color":"blue","border":"2px
solid blue"});
*
parentsUntil() - Returns all ancestor elements between two
given arguments.ex:
$("span").parentsUntil("div").css({"color":"green","border":"2px
solid green"});
Descendants
– is a child, grandchild , great-grandchild
Traversing
down the DOM tree :
*
children() - Returns all direct children of the selected element.
ex
1: $("ul").children().css({"color":"yellow","border":"2px
solid yellow"});
We
can also use an optional parameter to filter the search for children.
The
following example returns all <p> elements with
the class name "classP1", that are direct
children of <div>:
ex2:
$("div").children("p.classP1").css({"color":"red","border":"2px
solid red"});
*
find() - Returns descendant elements of the selected element,
all the way down to the last descendant.
ex
1: returns all <p> elements which is descendant of <div>
$("div").find("p").css({"color":"navy","border":"2px
solid navy"});
ex
2: returns all (*) elements which is descendant of <div>
$("div").find("*").css({"color":"teal","border":"2px
solid teal"});
Siblings
– Siblings share the same parent.
Traversing
sideways the DOM tree :
*
siblings() - Returns all sibling elements of the selected
element.
Ex
1: returns all sibling elements of <h2>:
$("h2").siblings().css({"color":"red","border":"2px
solid red"});
Ex
2: returns all sibling elements of <h2> that are <p>
elements:
$("h2").siblings("p").css({"color":"blue","border":"2px
solid blue"});
*
next() - Returns the next sibling element of the selected
element. This method only returns one element.
Ex
1: returns the next sibling of <h2>:
$("h2").next().css({"color":"teal","border":"2px
solid teal"});
*
nextAll() - Returns all the next sibling elements from the
selected element.
Ex
1: $("h2").nextAll().css({"color":"maroon","border":"2px
solid maroon"});
*
nextUntil() -
Returns all the next sibling elements between two given arguments.
Ex
1: $("h2").nextUntil("h3").css({"color":"purple","border":"2px
solid purple"});
*
prev() -
Returns the previous sibling element of the selected element. This
method only returns one element.
Ex
1: returns the next sibling of <h2>:
$("h2").prev().css({"color":"orange","border":"2px
solid orange"});
*
prevAll() - Returns all the previous sibling elements from the
selected element.
Ex
1: $("h2").prevAll().css({"color":"yellow","border":"2px
solid yellow"});
*
prevUntil() -
Returns all the previous sibling elements between two given
arguments.
Ex
1: $("h3").prevUntil("h2").css({"color":"olive","border":"2px
solid olive"});
jQuery
Filtering : Narrow Down The Search For Elements.
The
three most basic filtering methods
first()
- Returns the first element of the selected elements.
Ex:
-
selects
the first <p> element inside the first <div> element:
$("div p").first();
last()
- Returns the last element of
the selected elements.
Ex:
-
selects
the last <p> element inside the last <div> element:
$("div p").last();
eq()
- Returns an element with a
specific index number of the selected elements.
Ex:
-
The
index numbers start at 0, so the first element will have the index
number 0 and not 1. The following example selects the second <p>
element (index number 1): $("p").eq(1);
filter()
- This lets you specify a
criteria. Elements that do match the criteria will be returned.
Ex
-
returns
all <p> elements with class name "intro":
$("p").filter(".intro");
not()
- Returns all elements that do not
match the criteria.
Ex
-
returns
all <p> elements that do not have class name "intro":
$("p").not(".intro");
Full
example for jQuery DOM Traversing -
I.)
relevant html
<!DOCTYPE
html PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta
http-equiv="Content-Type"
content="text/html;
charset=UTF-8">
<style
type="text/css">@IMPORT
url("css/jQuery05DOMTravesing.css");</style>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script
src="JQueryJS/jQuery05DOMTravesing.js"></script>
</head>
<body>
<div
class="borderGray
bluefont">
<div
style="width:500px">A
:div
<ul>B
: ul
<li>C
: li
<span>D
: span</span>
</li>
</ul>
</div>
</div>
<div
class="borderGray
bluefont">
<div
style="width:500px">A
:div
<p
class="classP1">B1
: paragraph</p>
<p
class="classP1">B2
: paragraph</p>
<p
class="classP2">B3
: paragraph</p>
<h2>B4
: h2</h2>
<h1>B5
: h1</h1>
<span>B6
: span</span>
<h3>B7
: h2</h3>
</div>
</div>
<br>
<button
id="b_parent">span
: Parent</button>
<button
id="b_parents">span
: Parents</button>
<button
id="b_parentuntil">span
: ParentsUntil (Div)</button>
<br>
<br>
<button
id="b_children">ul
: Children</button>
<button
id="b_childrenOP">div
: Children with Optional Param</button>
<button
id="b_find">ul
: Find</button>
<button
id="b_findAll">ul
: Find All Descendants</button>
<br>
<br>
<button
id="b_siblings">h2
: Siblings</button>
<button
id="b_siblingsOP">h2
: Siblings with Optional Param</button>
<button
id="b_next">h2
: Next</button>
<button
id="b_nextAll">h2
: Next All</button>
<button
id="b_nextUntil">h2
: Next Until</button>
<br>
<br>
<button
id="b_prev">h2
: Prev</button>
<button
id="b_prevAll">h2
: Prev
All</button>
<button
id="b_prevUntil">h3
: Prev
Until</button>
</body>
</html>
ii.)
relevant css
body{
font-size:
12px;
font-family:
sans-serif;
}
.borderGray
*{
display:
block;
border:
2px solid
lightgrey;
color:
lightgrey;
padding:
5px;
margin:
15px;
}
iii.)
relevant jQuery js
$(function(){
$("#b_parent").click(function(){
$("span").parent().css({"color":"red","border":"2px
solid red"});
});
$("#b_parents").click(function(){
$("span").parents().css({"color":"blue","border":"2px
solid blue"});
});
$("#b_parentuntil").click(function(){
$("span").parentsUntil("div").css({"color":"green","border":"2px
solid green"});
});
$("#b_children").click(function(){
$("ul").children().css({"color":"yellow","border":"2px
solid yellow"});
});
$("#b_childrenOP").click(function(){
$("div").children("p.classP1").css({"color":"red","border":"2px
solid red"});
});
$("#b_find").click(function(){
$("div").find("p").css({"color":"navy","border":"2px
solid navy"});
});
$("#b_findAll").click(function(){
$("div").find("*").css({"color":"teal","border":"2px
solid teal"});
});
$("#b_siblings").click(function(){
$("h2").siblings().css({"color":"red","border":"2px
solid red"});
});
$("#b_siblingsOP").click(function(){
$("h2").siblings("p").css({"color":"blue","border":"2px
solid blue"});
});
$("#b_next").click(function(){
$("h2").next().css({"color":"teal","border":"2px
solid teal"});
});
$("#b_nextAll").click(function(){
$("h2").nextAll().css({"color":"maroon","border":"2px
solid maroon"});
});
$("#b_nextUntil").click(function(){
$("h2").nextUntil("h3").css({"color":"purple","border":"2px
solid purple"});
});
$("#b_prev").click(function(){
$("h2").prev().css({"color":"orange","border":"2px
solid orange"});
});
$("#b_prevAll").click(function(){
$("h2").prevAll().css({"color":"yellow","border":"2px
solid yellow"});
});
$("#b_prevUntil").click(function(){
$("h3").prevUntil("h2").css({"color":"olive","border":"2px
solid olive"});
});
});
Out put as follows -
