Knowledge Walls
Gopal Rao
Mumbai, Maharashtra, India
Passcode:
How to select number of elements with next()
1732 Views
Next and nextAll methods of JQuery 
next() method is used to select next of the current element.
nextAll() method is used to select next all of the element of current element in the same sibling.

Explained with some of the below example to use next() and nextAll() method of JQuery
  1. How to select next three elements of the current element
  2. How to select next all the elements of the current element
  3. How to select only next element of the current element
Example.1 How to select next 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).nextAll(':lt(3)').show(); //here 3 is the value to select number of divs.
            });
        });
    </script>
    <style type="text/css">
        .divControl {
            display: none;
        }
    </style>
</head>

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

</html>
Example.1 Demo 
Example.2 How to select next 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).nextAll().show();
            });
        });
    </script>
    <style type="text/css">
        .divControl {
            display: none;
        }
    </style>
</head>

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

</html>
Example.2 Demo 
Example.3 How to select only next 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).next().css("color", "red");
            });
        });
    </script>
</head>

<body>
    <div class="element">click here to apply red color on next element</div>
    <div class="element">click here to apply red color on next element</div>
    <div class="element">click here to apply red color on next element</div>
    <div class="element">click here to apply red color on next element</div>
    <div class="element">click here to apply red color on next element</div>
</body>

</html>
Example.3 Demo 
Next Topics
Next lessons of current book.
Previous Topics
Previous lessons of current book.
  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