Open In App

jQuery nextUntil() MEthod

Last Updated : 11 Jul, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

The nextUntil() is an inbuilt method in jQuery that is used to find all sibling elements between two given elements. Siblings are those having the same parent element in DOM Tree. Document Object Model (DOM) is a World Wide Web Consortium standard. This defines accessing elements in the DOM tree.

Syntax:

$(selector1).nextUntil(selector2)

Here selector1 is the starting element after which siblings are going to be found out.

Parameters: It accepts a parameter “selector2” which is the last selected element to find the siblings.

Return Value: It returns all the siblings between “selector1” and “selector2”.

jQuery code to show the working of nextUntil() method:

Example 1:

html




<!DOCTYPE html>
<html>
 
<head>
    <style>
        .bet_sib * {
            display: block;
            border: 2px solid lightgrey;
            color: black;
            padding: 5px;
            margin: 15px;
        }
    </style>
    <script src=
 
    </script>
    <script>
        $(document).ready(function () {
            $("span").nextUntil("p").css({
                "color": "black",
                "border": "2px solid green"
            });
        });
    </script>
</head>
 
<body class="bet_sib">
    <div>
        This is the parent element !!!
        <p>
            This is first paragraph!
        </p>
        <span>first span box !</span>
        <h2>heading 2!</h2>
        <h3>heading 3!</h3>
        <h4>heading 4!</h4>
        <h5>heading 5!</h5>
        <h6>heading 6!</h6>
        <p>This is second paragraph!</p>
    </div>
</body>
 
</html>


Output: In the above code, all the elements (or siblings) between “span” and next “p” get highlighted.

Example 2: In the below code, all the siblings between the same pair of elements can be selected.

html




<!DOCTYPE html>
<html>
 
<head>
    <style>
        .bet_sib * {
            display: block;
            border: 2px solid lightgrey;
            color: black;
            padding: 5px;
            margin: 15px;
        }
    </style>
    <script src=
 
    </script>
    <script>
        $(document).ready(function () {
            $("p").nextUntil("p").css({
                "color": "black",
                "border": "2px solid green"
            });
        });
    </script>
</head>
 
<body class="bet_sib">
    <div>
        This is the parent element !!!
        <p>
            This is first paragraph!
        </p>
        <span>first span box !</span>
        <h2>heading 2!</h2>
        <h3>heading 3!</h3>
        <h4>heading 4!</h4>
        <h5>heading 5!</h5>
        <h6>heading 6!</h6>
        <p>This is second paragraph!</p>
    </div>
</body>
 
</html>


Output: In the above code, all the elements (or siblings) between the paragraph elements get highlighted with green color.



Previous Article
Next Article

Similar Reads

jQuery Cheat Sheet – A Basic Guide to jQuery
What is jQuery?jQuery is an open-source, feature-rich JavaScript library, designed to simplify the HTML document traversal and manipulation, event handling, animation, and Ajax with an easy-to-use API that supports the multiple browsers. It makes the easy interaction between the HTML &amp; CSS document, Document Object Model (DOM), and JavaScript.
34 min read
jQuery jQuery.fx.interval Property with example
The jQuery.fx.interval property in jQuery is used to modify the number of frames per second at which animations will run and to change the animation firing rate in milliseconds. Its default value is 13ms. Syntax: jQuery.fx.interval = milliseconds;Parameters: This method accepts single parameter milliseconds which is mandatory. It is used to specify
2 min read
jQuery jQuery.fx.off Property
The jQuery.fx.off property in jQuery is used to globally disable/enable all animations. Its default value is false which is used to allow animation to run normally. Syntax: jQuery.fx.off = true|false;Parameter: This event accepts two parameters as mentioned above and described below: true: It is used to specify that the animations should be disable
2 min read
jQuery jQuery.support Property
The jQuery.support property in jQuery contains a collection of properties that are used to represent the different browser features or bugs. Syntax: jQuery.support.propvalueParameters: This property contains a single parameter propvalue: which is required. It is used to specify the function to test for. The tests included are: ajaxboxModelchangeBub
1 min read
jQuery jquery Property
The jquery property is used to return the jQuery version number. Syntax $().jqueryExample: Return the version number. C/C++ Code &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;style&gt; h1 { color: green; } &lt;/style&gt; &lt;script src= &quot;https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt; &lt;/script&gt; &lt;script
1 min read
How to append a jQuery object to all paragraphs using jQuery ?
In this article, we will see how to append a jQuery object to all paragraphs using jQuery. Append means we add something to an existing element. The object is used to define a container for an external resource like a page, a picture, a media player, or a plug-in application. Used Methods: ready() Method: This method is used to specify a function t
2 min read
How to insert a jQuery object after all paragraphs using jQuery ?
The task is to insert a jQuery object after all the paragraphs using jQuery. Approach: Create DOM element or jQuery object using &lt;span&gt; tag.Create a paragraph using &lt;p&gt; tag.Create a button using button tag after clicking on which the object will be inserted after paragraph.Write a script that will call a function jQuery.after() which is
1 min read
Difference between jquery.size() and jquery.length
JQuery.size() method gives us the number of elements present. For Example, if we are calling the size() method for "p" tag, then it will return the number of "p" tags present on our page. Syntax: $(selector).size() Return value: It returns the number of “selector” present. Example: C/C++ Code &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt;
2 min read
How to remove close button from jQuery UI dialog using jQuery ?
In this article, we will learn how to remove the close button on the jQuery UI dialog using JavaScript, This can be achieved using the hide() method. jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. A dialog box is a temporary window. An application creates a dial
2 min read
How is the deferred method in jquery important in relation to animate method ?
jQuery is a popular JavaScript library that provides a number of useful methods for manipulating the DOM (Document Object Model). One of these methods is the animate method, which allows you to animate the properties of an element over a given period of time. The animate() method is often used in conjunction with the Deferred() method, which allows
4 min read