HOWTO · jQuery

How to Select Sibling in jQuery

This tutorial demonstrates how to select a sibling in jQuery.

By Sheeraz GulPublished 2022-10-18Updated 2024-02-15
On this page

The siblings are the elements that are before and after a given element. jQuery has many methods to select siblings of a DOM tree based on which sibling we want to select.

These methods include:

  1. siblings()
  2. next()
  3. nextAll()
  4. nextUntil()
  5. prev()
  6. prevAll()
  7. prevUntil()

This tutorial demonstrates each method to select a sibling in jQuery.

Use siblings() Method to Select a Sibling in jQuery

The siblings() method is used to select all the sibling elements of the given element; the syntax for this method is below.

$(selector).siblings()

The above syntax will return all the siblings of the paragraph element; it also takes a parameter that will amplify which element sibling to select. Let’s try an example.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery siblings()</title>
<style>
    .addborder{
        border: 5px solid green;
    }
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("p").siblings().addClass("addborder");
});
</script>
</head>
<body>
    <div>
        <h1>Delftstack.com</h1>
        <p>Hello this is <b>Delftstack.com</b>.</p>
        <ul>
            <li>Java</li>
            <li>Python</li>
            <li class="addborder">GO</li>
            <li>PHP</li>
        </ul>
    </div>
</body>
</html>

The code above will add a border to the siblings of the paragraph. See the output:

jQuery Siblings

We can also use the siblings method to select a particular sibling of an element. See the example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery siblings()</title>
<style>
    .addborder{
        border: 5px solid green;
    }
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("p").siblings("ul").addClass("addborder");
});
</script>
</head>
<body>
    <div>
        <h1>Delftstack.com</h1>
        <p>Hello this is <b>Delftstack.com</b>.</p>
        <ul>
            <li>Java</li>
            <li>Python</li>
            <li class="addborder">GO</li>
            <li>PHP</li>
        </ul>
    </div>
</body>
</html>

The code above will now only select the ul sibling of the paragraph. See the output:

jQuery Siblings Select

Use next() Method to Select a Sibling in jQuery

The next() method of jQuery is used to get the immediate next sibling of the given element. The syntax for this method is below.

$(selector).next()

The next() method will not take any parameter; let’s try an example.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery next()</title>
<style>
    .addborder{
        border: 5px solid green;
    }
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("p").next().addClass("addborder");
});
</script>
</head>
<body>
    <div>
        <h1>Delftstack.com</h1>
        <p>Hello this is <b>Delftstack.com</b>.</p>
        <ul>
            <li>Java</li>
            <li>Python</li>
            <li class="addborder">GO</li>
            <li>PHP</li>
        </ul>
    </div>
</body>
</html>

The code above will select the next sibling of the paragraph element and add a border to it. See the output:

jQuery Next

Use nextAll() Method to Select a Sibling in jQuery

The nextAll() jQuery method gets all the siblings after the given element. The syntax for this method is below.

$(selector).nextAll()

The nextAll() method will not take any parameter; let’s try an example.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery nextAll()</title>
<style>
    .addborder{
        border: 5px solid green;
    }
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("p").nextAll().addClass("addborder");
});
</script>
</head>
<body>
    <div>
        <h1>Delftstack.com</h1>
        <p>Hello this is <b>Delftstack.com</b>.</p>
        <ul>
            <li>Java</li>
            <li>Python</li>
            <li>GO</li>
            <li>PHP</li>
        </ul>
        <h2>Delftstack.com</h2>
    </div>
</body>
</html>

The code above uses the nextAll method to select all the next siblings of the given paragraph element. See the output:

jQuery Next All

Use nextUntil() Method to Select a Sibling in jQuery

The nextUntil() jQuery method gets the siblings after the given element until a specific element. The syntax for this method is below.

$(selector).nextUntil(element)

The nextUntil() method will take one parameter, a specific element; let’s try an example.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery nextUntil()</title>
<style>
    .addborder{
        border: 5px solid green;
    }
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("p").nextUntil("h3").addClass("addborder");
});
</script>
</head>
<body>
    <div>
        <h1>Delftstack.com</h1>
        <p>Hello this is <b>Delftstack.com</b>.</p>
        <ul>
            <li>Java</li>
            <li>Python</li>
            <li>GO</li>
            <li>PHP</li>
        </ul>
        <h2>Delftstack.com</h2>
        <h3>Delftstack.com</h3>
    </div>
</body>
</html>

The code above will add the border to the next siblings of the paragraph element until the heading3 element. See the output:

jQuery Next Until

Use prev() Method to Select a Sibling in jQuery

The prev() jQuery method is used to get the immediately previous sibling of the given element. The syntax for this method is below.

$(selector).prev()

The prev() method will not take any parameter; let’s try an example.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery prev()</title>
<style>
    .addborder{
        border: 5px solid green;
    }
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("p").prev().addClass("addborder");
});
</script>
</head>
<body>
    <div>
        <h1>Delftstack.com</h1>
        <p>Hello this is <b>Delftstack.com</b>.</p>
        <ul>
            <li>Java</li>
            <li>Python</li>
            <li>GO</li>
            <li>PHP</li>
        </ul>
        <h2>Delftstack.com</h2>
        <h3>Delftstack.com</h3>
    </div>
</body>
</html>

The code above will add a border to the immediately previous element of the given element. See the output:

jQuery Prev

Use prevAll() Method to Select a Sibling in jQuery

The prevAll() jQuery method gets all the siblings before the given element. The syntax for this method is below.

$(selector).prevAll()

The prevAll() method will not take any parameter; let’s try an example.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery prevAll()</title>
<style>
    .addborder{
        border: 5px solid green;
    }
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("h3").prevAll().addClass("addborder");
});
</script>
</head>
<body>
    <div>
        <h1>Delftstack.com</h1>
        <p>Hello this is <b>Delftstack.com</b>.</p>
        <ul>
            <li>Java</li>
            <li>Python</li>
            <li>GO</li>
            <li>PHP</li>
        </ul>
        <h2>Delftstack.com</h2>
        <h3>Delftstack.com</h3>
    </div>
</body>
</html>

The code above will add the border to all previous siblings of the heading3 elements. See the output:

jQuery Prev All

Use prevUntil() Method to Select a Sibling in jQuery

The prevUntil() jQuery method gets the siblings before the given element until a specific element. The syntax for this method is below.

$(selector).prevUntil(element)

The prevUntil() method will take one parameter, a specific element; let’s try an example.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery prevUntil()</title>
<style>
    .addborder{
        border: 5px solid green;
    }
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("h3").prevUntil("p").addClass("addborder");
});
</script>
</head>
<body>
    <div>
        <h1>Delftstack.com</h1>
        <p>Hello this is <b>Delftstack.com</b>.</p>
        <ul>
            <li>Java</li>
            <li>Python</li>
            <li>GO</li>
            <li>PHP</li>
        </ul>
        <h2>Delftstack.com</h2>
        <h3>Delftstack.com</h3>
    </div>
</body>
</html>

The code above will add the border to the previous siblings of the heading3 element until the paragraph element. See the output:

jQuery Prev Until

About the author

Sheeraz Gul

Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.

View author profile
LinkedInFacebook