VimalTuts Code Junction Using JQuery prev() and prevAll() Method
In this JQuery tutorial, we are going take a look at some of the very important methods in the DOM Traversing. we are about to see jquery prev() and jquery prevAll() methods in the category of Tree Traversal.JQuery prev() Method Description
- This useful jQuery prev() method is used to grab the immediate prior sibling of each and every component in the list of matched components, have an option to filter the selection by a selector.
prev( [selector] )
JQuery prev() Example
<html>
<head>
<title>JQuery Contains() Method Example</title>
<style type="text/css">
.highlight{
background: orange;
}
body{
width: 200px;
}
</style>
<script src="jquery-1.8.3.js"></script>
<script>
$(function(){
$('.prev').click(function(){
$('li.highlight').removeClass('highlight').prev('li') .addClass('highlight');
})
});
</script>
</head>
<body>
<ul>
<li>Chrome - Browser</li>
<li>Firefox - Browser</li>
<li>Windows 8 - OS</li>
<li>Android - OS</li>
<li>Safari - Browser</li>
<li>Machintosh - OS</li>
<li class='highlight'>Facebook - Social</li>
<li>Twitter - Social</li>
<li>Google - Search Engine</li>
<li>Google Plus - Social</li>
<li>Bing - Search Engine</li>
</ul>
<button class="prev">Prev</button>
</body>
</html>
Try the below jquery prev() working demo
JQuery prevAll() Method Description
- This handy jQuery prev() technique is useful to get hold of the immediate prior sibling of each and every component within the set of matched components, come with an option to filter the selection by a selector.
.prevAll( [selector] )
JQuery prevAll() Example
<html>
<head>
<title>JQuery Contains() Method Example</title>
<style type="text/css">
.highlight{
background: orange;
}
body{
width: 200px;
}
</style>
<script src="jquery-1.8.3.js"></script>
<script>
$(function(){
$('.prevAll').click(function(){
$('li.highlight').prevAll().addClass('highlight');
})
});
</script>
</head>
<body>
<ul>
<li>Chrome - Browser</li>
<li>Firefox - Browser</li>
<li>Windows 8 - OS</li>
<li>Android - OS</li>
<li>Safari - Browser</li>
<li>Machintosh - OS</li>
<li class='highlight'>Facebook - Social</li>
<li>Twitter - Social</li>
<li>Google - Search Engine</li>
<li>Google Plus - Social</li>
<li>Bing - Search Engine</li>
</ul>
<button class="prevAll">Prev All</button>
</body>
</html>
Try the below jquery prevAll() working demo
JQuery prev(), prevAll() with next() Method Example
<html>
<head>
<title>JQuery Contains() Method Example</title>
<style type="text/css">
.highlight{
background: orange;
}
body{
width: 200px;
}
</style>
<script src="jquery-1.8.3.js"></script>
<script>
$(function(){
$('.next').click(function(){
$('li.highlight').removeClass('highlight') .next().addClass('highlight');
})
$('.prev').click(function(){
$('li.highlight').removeClass('highlight') .prev('li').addClass('highlight');
})
$('.prevAll').click(function(){
$('li.highlight').prevAll().addClass('highlight');
})
});
</script>
</head>
<body>
<ul>
<li class='highlight'>Chrome - Browser</li>
<li>Firefox - Browser</li>
<li>Windows 8 - OS</li>
<li>Android - OS</li>
<li>Safari - Browser</li>
<li>Machintosh - OS</li>
<li>Facebook - Social</li>
<li>Twitter - Social</li>
<li>Google - Search Engine</li>
<li>Google Plus - Social</li>
<li>Bing - Search Engine</li>
</ul>
<button class="next">Next</button>
<button class="prev">Prev</button>
<button class="prevAll">PrevAll</button>
</body>
</html>
Try the below jquery prev(), prevAll() with next() working demo
In this JQuery tutorial, we have looked at some of the very important methods in the DOM Traversing. we have seen about how to use jquery prev() and prevAll() methods. Google+
