andSelf method in jQuery with example
1. andSelf() method adds the previous set of elements on the stack to the current stack.
2. jQuery object maintains an internal stack of selected elements. It keeps track of changes to the matched set of elements.
3. When one of the DOM traversal method is called, the new set of elements is pushed on to stack. Now the current object contains elements matching the selector used in the method used to traverse across the object.
4. In order to get the previous elements, we can use andSelf() method.
5. andSelf method considers the current selected elements as well as previously matched elements.
Example 1 :
<html>
<head>
<title>andSelf</title>
<style type="text/css">
#targetDiv
{
width:200px;
height:100px;
background-color:yellow;
}
#targetP
{
background-color:skyblue;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function () {
var css = { 'font-family': 'comic sans ms',
'color': 'red'
};
$("#OnlyDiv").click(function () {
$("#targetDiv").css(css);
});
$("#OnlyP").click(function () {
$("#targetP").css(css);
});
$("#Both").click(function () {
$("#targetDiv").find("p").andSelf().css(css);
});
$("#reset").click(function () {
location.reload();
});
});
</script>
</head>
<body>
<div id="targetDiv">
This is div<br/><br>
<p id="targetP">This is p element inside div element.</p>
</div><br /><br />
<input type="button" id="OnlyDiv" value="OnlyDiv"/>
<input type="button" id="OnlyP" value="Only Paragraph"/>
<input type="button" id="Both" value="Both (using addSelf())"/>
<input type="button" id="reset" value="Reset"/>
</body>
</html>
In the above example, we have created a div and a paragraph inside this div. We have created 4 buttons, for different operations.
On clicking "Only Div" button we are simply using id selector to select div element. As paragraph element is nested in div element, CSS for both will change on clicking "Only Div" button.
On clicking "Only P" button CSS of only paragraph element is changed as we are selecting only paragraph element.
On clicking "Both (using andSelf)" button we are selecting div element and finding p inside it using find() method and then by using andSelf() method we are adding previous selected elements on the object's stack to the current one so that CSS for both will change.
Example 2 :
<html>
<head>
<title>andSelf</title>
<style type="text/css">
#targetDiv
{
width:200px;
height:100px;
background-color:yellow;
}
#targetP
{
background-color:skyblue;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function () {
var css = { 'color': 'red',
'font-family': 'comic sans ms'
};
$("#prev").click(function () {
$("#target").prev().css(css);
});
$("#current").click(function () {
$("#target").css(css);
});
$("#next").click(function () {
$("#target").next().css(css);
});
$("#prevAndSelf").click(function () {
$("#target").prev().andSelf().css(css);
});
$("#nextAndSelf").click(function () {
$("#target").next().andSelf().css(css);
});
$("#reset").click(function () {
location.reload();
});
});
</script>
</head>
<body>
<h2>List of Players :</h2>
<ul>
<li>Thierry Henry</li>
<li>Cesc Fabregas</li>
<li id="target">Jack Wilshere</li>
<li>Santi Cazorla</li>
<li>Thomas Vermaelen</li>
</ul>
<input type="button" id="prev" value = "Prev" />
<input type="button" id="current" value = "Current (Jack Wilshere)" />
<input type="button" id="next" value = "Next" />
<input type="button" id="prevAndSelf" value = "Prev andSelf()" />
<input type="button" id="nextAndSelf" value = "Next andSelf()" />
<input type="button" id="reset" value = "Reset" />
</body>
</html>
In the above example, we have created an unordered list of players. We have created few buttons, to explain how andSelf() method works. We have selected "Jack Wilshere" from the list as our current element. "Jack Wilshere" is our target element.
Following buttons performs following operations :
prev : It selects the prev element considering "Jack Wilshere" as current. We have selected target, and used prev() method to get the previous element as current object. CSS is applied to previous element.
current : It selects the current element using id selector and applies CSS to it.
next : It selects the next element to the current one. We are selecting the current element using id selector and using next() method, selecting the next element and applying CSS to it.
Prev andSelf : First we select our target element, using prev() method we are selecting previous element, and then we are using andSelf method to get previous selected and current element both and CSS is applied to it.
Next andSelf : First we select our target element, using next() method we are selecting next element, and then we are using andSelf method to get next selected and current element both and CSS is applied to it.
reset : Refreshes the page.
Example 3:
<html>
<head>
<title>adding element</title>
<style type="text/css">
div
{
color:Red;
font-size:24px;
background-color:#FDC0C0
}
p
{
color:orange;
font-size:18px;
}
span
{
color:Green;
font-size:12px;
background-color:#83E681
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function () {
$('#div').click(function () {
$('div').find('p').andSelf().css({ 'color': 'aqua', 'font-size': '32px' });
});
$('#paragraph').click(function () {
$('p').find('span').andSelf().css({ 'color': 'aqua', 'font-size': '32px' });
});
});
</script>
</head>
<body>
<div>
This is Div element.
<p>This is paragraph element inside div.
<span>This is span element inside paragraph element.</span>
</p>
</div>
<input type="button" id="div" value="Div - andSelf()"/>
<input type="button" id="paragraph" value="p - andSelf()"/>
<input type="button" value="Reset" onclick="location.reload()" />
</body>
</html>
Demo :
In the above example, we have created a simple div element and created paragraph element inside it. similarly created span element inside paragraph element. We have given different colors to each control to make the controls differentiate visually.
Onclick of "Div - andSelf" button, we are selecting div element using element selector, and then finding p element inside it. When we find p element using find() method, the current jQuery object contains paragraph element. In order to include div element along with paragraph element we use andSelf() method.
andSelf() method combines two objects and creates a new object. It combines current object and the object previous to it on the object stack.
Watch Video :
Nice demos to understand how to use this method.
ReplyDelete