nextAll method in jQuery with examples

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

nextAll method in jQuery with examples

Posted by 20Fingers2Brains on Tags: JQuery , jQuery Methods

1. nextAll() method gets the following siblings of each element in the set of matched elements.
2. nextAll() method allows us to search for all the successors of a particular element and construct a new jQuery object

Example 1 :

        <html>
        <head>
            <title>nextAll</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 () {
                $("#nextAll").click(function () {
                    $(".css").removeClass("css").nextAll().addClass("css");
                });
            });
        </script>
        </head>
        <body>
        <div>
        <p class="css">This is paragraph element. This is colored.</p>
        <div>This is div element.</div><br>
        <span>This is span elment.</span><br />
        </div>
        <input type="button" id="nextAll" value="nextAll" />
        <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 "nextAll" button click we are selecting paragraph element using class selector and using nextAll() method, all following siblings are selected and CSS is applied to it.

Example 2 :

        <html>
        <head>
        <title>nextAll</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.");
                    }
                });

                $("#nextAll").click(function () {
                    if ($(".css")[0] != undefined)
                        $(".css").removeClass("css").nextAll().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="nextAll" value="NextAll" />
        <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 "nextAll" button click all following sibling li elements are selected and CSS is applied to it. We have applied required validations as well.