next method in jQuery with examples
1. next() method gets the immediately following sibling of each element int the set of matched elements.
2. Given a jQuery object representing a set of DOM elements, the next() method allows us to search through the immediately following sibling of these elements in the DOM tree and construct a new jQuery object from matched elements.
3. next() method also accepts a selector expression. If the immediately following sibling matches the selector, it is selected in the object else it is excluded.
Example 1 :
<html>
<head>
<title>next</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 () {
$("#tt").next().css(cssText);
});
$("#fabregas").click(function () {
$("#fab").next().css(cssText);
});
$("#rocisky").click(function () {
$("#mozart").next().css(cssText);
});
$("#vermaelen").click(function () {
$("#verminator").next().css(cssText);
});
$("#wolcott").click(function () {
alert("This is the last element. There is nothing next to this!!");
});
$("#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><br />
<input type="button" id="henry" value="Next of Henry" />
<input type="button" id="fabregas" value="Next of Fabregas" />
<input type="button" id="rocisky" value="Next of Rocisky" />
<input type="button" id="vermaelen" value="Next of Vermaelen" />
<input type="button" id="wolcott" value="Next 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 next() method, the next li element is selected and CSS is applied to it.
Example 2 :
<html>
<head>
<title>next</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");
}
});
$("#next").click(function () {
var currentIndex = $(".css").index();
if (currentIndex < (rowCount - 1))
$(".css").removeClass("css").next().addClass("css");
else
alert("Next 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="next" value="Next" />
<input type="button" id="reset" value="Reset" onclick="location.reload()" />
</body>
</html>
Demo :In the above example, we have created a table. We ask user to enter the index to select the table row. Then on click of next button, we are changing the CSS of next row. We have applied required validations as well.
0 comments:
Post a Comment