$(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();
});
});
<html>
<head>
<title>andSelf</title>
</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>
#targetDiv
{
width:200px;
height:100px;
background-color:yellow;
}
#targetP
{
background-color:skyblue;
}