In previous jQuery tutorials, we can easily handle current selected element with $(this). However we sometimes also need to do some animation or other web effects with other elements “related” with the current selected element. The jQuery documentation use the terms “DOM Tree”. But I know that most people (include me) will be scared by the term “DOM Tree”. Therefore I prefer to use “related” rather than “DOM Tree” despite this is not a good and valid term.
Let’s take the same example that I used before to play around. There are the same two product images layout on a webpage.
Here’s the HTML and jQuery codes:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Select Element with Parents and Parent</title>
<style type="text/css">
<!--
h2 {
padding-bottom: 5px;
color: #039;
}
.frame {
/*padding:5px;*/
/*margin-top:5px;*/
border: 4px solid #000;
background-repeat: repeat-x;
background-position: right top;
/*background-image: url(sea.png);*/
background-color:#0099cc; /*Blue color*/
height: 100px;
overflow: hidden;
width: 150px;
}
.outerFrame {
width:340px;
/*background-color:#999;*/
}
.left {
width:150px;
height:100px;
background-color:#FC0; /*Brown color*/
float: left;
}
.right {
width:150px;
height:100px;
background-color:#9C0; /*Green color*/
float: right;
}
-->
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$("document").ready(function() {
var targetElement = $(".frame img");
targetElement.click(function() {
$(this).parents().animate( {"width": "+=150px"}, 1000 );
});
});
</script>
</head>
<body>
<h2>jQuery Select Elements with Parents() and Parent()</h2>
<div>
<div style="float:left;">
<div><img src="test.png" width="150" height="100" />
</div>
<div>
This is the right side
</div>
</div>
<div>
<div><img src="test.png" width="150" height="100" />
</div>
<div>
This is the right side
</div>
</div>
</div>
</body>
</html>
We have used this example for many times. Therefore you should be very familiar with this webpage layout. For illustration purpose, I use different background color for different Div Layers for this tutorial.
This time, the animated element is:
$(this).parents().animate( {“width”: “+=150px”}, 1000 );
Refresh browser. Click on any product image and see what happens.
When clicked on the left product image, the corresponding left div layer animated.
If clicked on the right product image, the corresponding left div layer animated.
This is clear that the jQuery Parents() will select the element on the top of the tree structure.
Actually the parents() move up the tree more than that. In fact, it moves up to the very top of the tree. Let’s try to see if this can animate the “.frame” Div layer.
$(this).parents(“.frame”).animate( {“width”: “+=150px”}, 1000 );
Yeah! The target element is the “.frame” layer.
In other words, the jQuery Parents() actually move up to the top of tree. We can select the target element by specifying the class of that Div layer.
Let’s use one more example to illustrate this fact. Let’s try to see if this can animate the “.outerFrame” Div layer. Remember to set a width and background color of the outerFame Div layer in order to see the effect.
$(this).parents(“.outerFrame”).animate( {“width”: “+=150px”}, 1000 );
Refresh browser to see the effect.
Ah! It works! The target element is really the outerFrame Div layer.
The completed source codes are:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Select Element with Parents and Parent</title>
<style type="text/css">
<!--
h2 {
padding-bottom: 5px;
color: #039;
}
.frame {
/*padding:5px;*/
/*margin-top:5px;*/
border: 4px solid #000;
background-repeat: repeat-x;
background-position: right top;
/*background-image: url(sea.png);*/
background-color:#0099cc; /*Blue color*/
height: 100px;
overflow: hidden;
width: 150px;
}
.outerFrame {
width:340px;
background-color:#999;
}
.left {
width:150px;
height:100px;
background-color:#FC0; /*Brown color*/
float: left;
}
.right {
width:150px;
height:100px;
background-color:#9C0; /*Green color*/
float: right;
}
-->
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$("document").ready(function() {
var targetElement = $(".frame img");
targetElement.click(function() {
// Animate .left div layer
//$(this).parents().animate( {"width": "+=150px"}, 1000 );
// Animate the .frame div layer
//$(this).parents(".frame").animate( {"width": "+=150px"}, 1000 );
// Animate the .outerFrame layer
$(this).parents(".outerFrame").animate( {"width": "+=150px"}, 1000 );
});
});
</script>
</head>
<body>
<h2>jQuery Select Elements with Parents() and Parent()</h2>
<div>
<div style="float:left;">
<div><img src="test.png" width="150" height="100" /></div>
<div>This is the right side</div>
</div>
<div>
<div><img src="test.png" width="150" height="100" /></div>
<div>This is the right side</div>
</div>
</div>
</body>
</html>
Download jQuery Source Files:
Click here to download the jQuery source file
Use of jQuery Parent() to Select Target Element
As you can see the jQuery Parents() is really very “powerful”. It can goes up to the top of the element tree. Therefore many web developer would like to use the jQuery parent() instead.
The jQuery parent() is acting the same way as parents() except that it only move up ONE level of the tree.
Use use the same example to see how jQuery Parent() works.
The “.frame” level is TWO level up the target element. Therefore we need to use parent() TWO times in order to select the “.frame” Div layer. The jQuery will be:
$(this).parent().parent(‘.frame’).animate( {“width”: “+=150px”}, 1000 );
The “.frame” Div layer was animated.
The situation is:
This is clear that we need to use parent() THREE times to select the “.outerframe” layer:
$(this).parent().parent().parent(‘.outerFrame’).animate( {“width”: “+=150px”}, 1000 );
The outerFrame Div layer will be animated as expected:
The following diagram illustrate how to use the parent() three times to access the “.outerframe” Div layer.
The completed source codes up to now are:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Select Element with Parents and Parent</title>
<style type="text/css">
<!--
h2 {
padding-bottom: 5px;
color: #039;
}
.frame {
/*padding:5px;*/
/*margin-top:5px;*/
border: 4px solid #000;
background-repeat: repeat-x;
background-position: right top;
/*background-image: url(sea.png);*/
background-color:#0099cc; /*Blue color*/
height: 100px;
overflow: hidden;
width: 150px;
}
.outerFrame {
width:340px;
background-color:#999;
}
.left {
width:150px;
height:100px;
background-color:#FC0; /*Brown color*/
float: left;
}
.right {
width:150px;
height:100px;
background-color:#9C0; /*Green color*/
float: right;
}
-->
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$("document").ready(function() {
var targetElement = $(".frame img");
targetElement.click(function() {
// Animate .left div layer
//$(this).parents().animate( {"width": "+=150px"}, 1000 );
// Animate the .frame div layer
//$(this).parents(".frame").animate( {"width": "+=150px"}, 1000 );
// Animate the .outerFrame layer
//$(this).parents(".outerFrame").animate( {"width": "+=150px"}, 1000 );
////////////// Use of Parent() //////////////
// Animate the .frame div layer
//$(this).parent().parent('.frame').animate( {"width": "+=150px"}, 1000 );
// Animate the .outerFrame div layer
$(this).parent().parent().parent('.outerFrame').animate( {"width": "+=150px"}, 1000 );
});
});
</script>
</head>
<body>
<h2>jQuery Select Elements with Parents() and Parent()</h2>
<div>
<div style="float:left;">
<div><img src="test.png" width="150" height="100" /></div>
<div>This is the right side</div>
</div>
<div>
<div><img src="test.png" width="150" height="100" /></div>
<div>This is the right side</div>
</div>
</div>
</body>
</html>
Download jQuery Source Files:
Leave a Reply