prevAll method in jQuery with examples

Home » JQuery » jQuery Methods » prevAll method in jQuery with examples

prevAll method in jQuery with examples

Posted by 20Fingers2Brains on Tags: JQuery , jQuery Methods

1. prevAll() method gets the preceding siblings of each element in the set of matched elements.

2. prevAll() method allows us to search for all the predecessors of a particular element and cinstruct a new jQuery object.

Example 1 :

        <html>
        <head>
            <title>prevAll</title>
            <style type="text/css">
            .css
            {
                color:Aqua;
                font-size:30px;
            }
            </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 () {
                $("#prevAll").click(function () {
                    $(".css").removeClass("css").prevAll().addClass("css");
                });
            });
        </script>
        </head>
        <body>
        <div>
        <p>This is paragraph element. This is colored.</p>
        <div>This is div element.</div><br>
        <span class="css">This is span elment.</span><br />
        </div>
        <input type="button" id="prevAll" value="prevAll" />
        <input type="button" id="reset" value="Reset" onclick="location.reload()" />
        </body>
        </html>

Demo :

In the above example, we have created few div elements and span element. On "prevAll" button click we are selecting paragraph element using class selector and using prevAll() method, all preceding siblings are selected and CSS is applied to it.

Example 2 :

        <html>
        <head>
        <title>prevAll</title>
        <style type="text/css">
          .css
          {
              color:Aqua;
              font-size:30px;
          }
        </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 () {
                $("#myButton").click(function () {
                    var liNum = $("#number").val();
                    if (liNum != "") {
                        if ($("li")[liNum] != undefined) {
                            $(".css").removeClass("css");
                            $("li:eq(" + liNum + ")").addClass("css");
                        }
                        else {
                            alert("Enter valid position !!");
                        }
                    }
                    else {
                        alert("Please enter Position.");
                    }
                });

                $("#prevAll").click(function () {
                    if ($(".css")[0] != undefined)
                        $(".css").removeClass("css").prevAll().addClass("css");
                    else
                        alert("Please enter position and click Click Me. Then try to click NextAll button.");
                });
            });
        </script>
        </head>
        <body>
        <b>List of Players :</b>
        <ul>
        <li>Ronaldinho</li>
        <li>Zinedine Zidane</li>
        <li>Maradona</li>
        <li>Pele</li>
        <li>Messi</li>
        <li>Ronaldo</li>
        </ul>
        <b>Enter li position to manipulate : </b><input type="text" id="number" /><br />
        <input type="button" id="myButton" value="Select" />
        <input type="button" id="prevAll" value="PrevAll" />
        <input type="button" id="reset" value="Reset" onclick="location.reload();" />
        </body>
        </html>

Demo :

In the above example, we have created an unordered list of players. We are asking user to specify the index of li element to select. On "PrevAll" button click all preceding sibling li elements are selected and CSS is applied to it. We have applied required validations as well.