Knowledge Walls
Gopal Rao
Mumbai, Maharashtra, India
Passcode:
How to select number of previous divs with prev()
2514 Views
Example.1 How to select previous three elements of the current element
<html>

<head>
    <title>HTML-JQuery</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $(".divnext").click(function () {
                $(this).prevAll(':lt(3)').show();
            });
        });
    </script>
    <style type="text/css">
        .divControl {
            display: none;
        }
    </style>
</head>

<body>
    <div class="divControl">1</div>
    <div class="divControl">2</div>
    <div class="divControl">3</div>
    <div class="divControl">4</div>
    <div class="divnext">5</div>
</body>

</html>
Prev and prevAll methods of JQuery 
prev() method is used to select previous of the current element.
prevAll() method is used to select previous all of the element of current element in the same sibling.

Explained with some of the below example to use prev() and prevAll() method of JQuery
  1. How to select previous three elements of the current element
  2. How to select previous all the elements of the current element
  3. How to select only previous element of the current element
Example.2 How to select previous all the elements of the current element
<html>

<head>
    <title>HTML-JQuery</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $(".divnext").click(function () {
                $(this).prevAll().show();
            });
        });
    </script>
    <style type="text/css">
        .divControl {
            display: none;
        }
    </style>
</head>

<body>
    <div class="divControl">1</div>
    <div class="divControl">2</div>
    <div class="divControl">3</div>
    <div class="divControl">4</div>
    <div class="divnext">5</div>
</body>

</html>
Example.1 Demo  
Example.2 Demo 
Example.3 How to select only previous element of the current element
<html>
  <head>
    <title>HTML-JQuery</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $(".element").click(function () {
                $(this).prev().css("color", "red");
            });
        });
    </script>
  </head>
  <body>
    <div class="element">click here to apply red color on previous element</div >
    <div class="element" > click here to apply red color on previous element </div>
    <div class="element">click here to apply red color on previous element</div>
    <div class ="element"> click here to apply red color on previous element < /div>
    <div class="element">click here to apply red color on previous element</div >
  </body>
</html >
Example.3 Demo 
Best Lessons of "JQuery Examples"
Top lessons which are viewed more times.
  Copyright © 2014 Knowledge walls, All rights reserved
KnowledgeWalls
keep your tutorials and learnings with KnowledgeWalls. Don't lose your learnings hereafter. Save and revise it whenever required.
Click here for more details