prev method in jQuery with examples
1. prev() gets the immediate preceeding sibling of each element in the set of matched elements.
2. prev() method searched for the predecessor for each of the matched elements and creates a new jQuery object.
Example 1 :
<html>
<head>
<title>prev</title>
<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 cssText = { 'font-size': '30px', 'color': 'aqua' };
$("#henry").click(function () {
alert("This is the first element. There is nothing previous to this!!");
});
$("#fabregas").click(function () {
$("#fab").prev().css(cssText);
});
$("#rocisky").click(function () {
$("#mozart").prev().css(cssText);
});
$("#vermaelen").click(function () {
$("#verminator").prev().css(cssText);
});
$("#wolcott").click(function () {
$("#fastandfurious").prev().css(cssText);
});
$("#reset").click(function () {
location.reload();
});
});
</script>
</head>
<body>
<b>List of Players</b>
<ul>
<li id="tt">Thierry Henry</li>
<li id="fab">Cesc Fabregas</li>
<li id="mozart">Tomas Rocisky</li>
<li id="verminator">Thomas Vermaelen</li>
<li id="fastandfurious">Theo Wolcott</li>
</ul>
<input type="button" id="henry" value="Prev of Henry" />
<input type="button" id="fabregas" value="Prev of Fabregas" />
<input type="button" id="rocisky" value="Prev of Rocisky" />
<input type="button" id="vermaelen" value="Prev of Vermaelen" />
<input type="button" id="wolcott" value="Prev of Wolcott" />
<input type="button" id="reset" value="Reset" />
</body>
</html>
Demo :In the above example, we have created an unordered list of players. We have created buttons corresponding to player names in the list.
On click of button, corresponding li element is selected and using prev() method, the previous li element is selected and CSS is applied to it.
Example 2 :
<html>
<head>
<title>prev</title>
<style type="text/css">
.css
{
background-color:aqua;
}
</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 rowNum;
var rowCount;
$("#selectRow").click(function () {
rowNum = $("#rowNum").val();
rowCount = $("tr").length;
if (rowNum < rowCount) {
$("tr:eq(" + rowNum + ")").addClass("css");
}
else {
alert("Enter valid row. Index start from 0");
}
});
$("#prev").click(function () {
var currentIndex = $(".css").index();
if (currentIndex != 0)
$(".css").removeClass("css").prev().addClass("css");
else
alert("prev does not exist !!");
});
});
</script>
</head>
<body>
<table border="1">
<caption>Players</caption>
<tr>
<th>Name</th>
<th>Club</th>
<th>Height</th>
<th>Position</th>
</tr>
<tr>
<td>Thierry Henry</td>
<td>New York Red BUlls</td>
<td>186 cm</td>
<td>Forward</td>
</tr>
<tr>
<td>Cesc Fabregas</td>
<td>FC Barcelona</td>
<td>176 cm</td>
<td>Midfield</td>
</tr>
<tr>
<td>Santiago Cazorla</td>
<td>Arsenal FC</td>
<td>168 cm</td>
<td>Midfield</td>
</tr>
<tr>
<td>Laurent Kocielny</td>
<td>Arsenal FC</td>
<td>186 cm</td>
<td>Defecnce</td>
</tr>
<tr>
<td>Tomas Rocisky</td>
<td>Arsenal FC</td>
<td>176 cm</td>
<td>Midfield</td>
</tr>
</table>
<br /><br />
<input type="text" id="rowNum" />
<input type="button" id="selectRow" value="Select Row" />
<input type="button" id="prev" value="Prev" />
<input type="button" id="reset" value="Reset" onclick="location.reload()" />
</body>
</html>
Demo :In the above example, we have created a table. In above example we ask user to enter the index to select the table row. Then on click of prev button, we are changing the CSS of previous row. We have applied required validations as well.
0 comments:
Post a Comment