To Find a Siblings Elements Using jQuery Methods

To Find a Siblings Elements Using jQuery Methods

In jQuery – How to do get or find siblings on selected html elements using jquery method. In this jQuery tutorial you will learn how to use jquery siblings method on selected html element’s.

jQuery Siblings Methods

jQuery offers several siblings methods and ways such as siblings(), next(), nextAll(), nextUntil(), prev(), prevAll() and prevUntil(). You can use this methods with html elements.

jQuery siblings() Method

JQuery siblings () method is used to return/get the sibling elements of the selected HTML element.

Syntax siblings() Method

$("selector").siblings()

This returns the all the sibling elements.

jQuery siblings() method By Example

This example will demostrate you how use siblings method to selected html elements.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery siblings() Method Example</title>
<style type="text/css">
    .g_cls{
        background: green;
    }        
</style>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
<script type="text/javascript">
$(document).ready(function(){
    $("#p_sib").siblings().addClass("g_cls");
});
</script>
</head>
<body>
    <div class="container">
        <h3>Hello World</h3>
        <p id="p_sib">This is paragraph</p>
        <ul>
            <li>First</li>
            <li>Second</li>
            <li>Third</li>
        </ul>
    </div>
</body>
</html>                            

Output

jQuery siblings() Method Example

Hello World

This is paragraph

  • First
  • Second
  • Third

jQuery next() Method

The next () method of JQuery is used to get/find immediately after sibling i.e. the next sibling element of the selected HTML element

Syntax next() Method

$("selector").next()

jQuery next() method By Example

This example will demostrate you how use next method to selected html elements.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery next() Method Example</title>
<style type="text/css">
    .g_cls{
        background: green;
    }        
</style>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
<script type="text/javascript">
$(document).ready(function(){
    $("#nextSib").next().addClass("g_cls");
});
</script>
</head>
<body>
    <div class="container">
        <h3>Hello World</h3>
        <p id="nextSib">This is paragraph</p>
        <ul>
            <li>First</li>
            <li>Second</li>
            <li>Third</li>
        </ul>
    </div>
</body>
</html>                            

Output

jQuery next() Method Example

Hello World

This is paragraph

  • First
  • Second
  • Third

jQuery nextAll() Method

Using the jQuery nextUntil() method to find all sibling elements between two given elements but not including the element matched by the selector.

Syntax nextAll() Method

$("selector").nextAll()

jQuery nextAll() method By Example

This example will demostrate you how use nextAll method to selected html elements.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery nextAll() Method Example</title>
<style type="text/css">
    .g_cls{
        background: green;
    }        
</style>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
<script type="text/javascript">
$(document).ready(function(){
    $("#nextAll").nextAll().addClass("g_cls");
});
</script>
</head>
<body>
    <div class="container">
        <h3>Hello World</h3>
        <p id="nextAll">This is paragraph</p>
        <ul>
            <li>First</li>
            <li>Second</li>
            <li>Third</li>
        </ul>
    </div>
</body>
</html>                            

Output

jQuery nextAll() Method Example

Hello World

This is paragraph

  • First
  • Second
  • Third

jQuery nextUntil() Method

JQuery nextUntil () method is used to return/get the sibling elements of the selected HTML element.

Syntax nextUntil() Method

$("selector").nextUntil()

jQuery nextUntil() method By Example

This example will demostrate you how use nextUntil method to selected html elements.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery nextUnit() Method Example</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
<style type="text/css">
    .g_cls{
        background: green;
    }        
</style>

<script type="text/javascript">
$(document).ready(function(){
    $(".nextunit").nextUntil('ul').addClass("g_cls");
});
</script>
</head>
<body>
    <div class="container">
        <h3 class="nextunit">Hello World</h3>
        <p>This is paragraph</p>
        <p>This is another paragraph.</p>
        <ul>
            <li>First</li>
            <li>Second</li>
            <li>Third</li>
        </ul>
    </div>
</body>
</html>                            

Output

jQuery nextUnit() Method Example

Hello World

This is paragraph

This is another paragraph.

  • First
  • Second
  • Third

jQuery prev() Method

The next () method of JQuery is used to get/find immediately preceding sibling i.e. the previous sibling element of the selected HTML element

Syntax prev() Method

$("selector").prev();

jQuery prev() method By Example

This example will demostrate you how use prev method to selected html elements.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery prev() Method Example</title>
<style type="text/css">
    .g_cls{
        background: green;
    }        
</style>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
<script type="text/javascript">
$(document).ready(function(){
    $(".prevSB").prev().addClass("g_cls");
});
</script>
</head>
<body>
    <div class="container">
        <h3>Hello World</h3>
        <p>This is paragraph</p>
        <p class="prevSB">This is another paragraph.</p>
        <ul>
            <li>First</li>
            <li>Second</li>
            <li>Third</li>
        </ul>
    </div>
</body>
</html>                            

Output

jQuery prev() Method Example

Hello World

This is paragraph

This is another paragraph.

  • First
  • Second
  • Third

jQuery prevAll() Method

Using the jQuery prevAll() method to get/find all preceding siblings of the selected HTML element.

Syntax prevAll() Method

$("selector").prevAll()

jQuery prevAll() method By Example

This example will demostrate you how use prevAll method to selected html elements.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery prevAll() Method Example</title>
<style type="text/css">
    .g_cls{
        background: green;
    }        
</style>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
<script type="text/javascript">
$(document).ready(function(){
    $(".prevSB").prevAll().addClass("g_cls");
});
</script>
</head>
<body>
    <div class="container">
        <h3>Hello World</h3>
        <p>This is paragraph</p>
        <p>This is another paragraph.</p>
        <ul class="prevSB">
            <li>First</li>
            <li>Second</li>
            <li>Third</li>
        </ul>
    </div>
</body>
</html>                            

Output

jQuery prevAll() Method Example

Hello World

This is paragraph

This is another paragraph.

  • First
  • Second
  • Third

jQuery prevUntil() Method

Using the jQuery nextUntil() method to find all preceding elements between two given elements but not including the element matched by the selector.

Syntax prevUntil() Method

$("selector").prevUntil()

jQuery prevUntil() method By Example

This example will demostrate you how use prevUntil method to selected html elements.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery prevUnit() Method Example</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
<style type="text/css">
    .g_cls{
        background: green;
    }        
</style>

<script type="text/javascript">
$(document).ready(function(){
    $(".prevunit").prevUntil('ul').addClass("g_cls");
});
</script>
</head>
<body>
    <div class="container">
        <h3>Hello World</h3>
        <p>This is paragraph</p>
        <p>This is another paragraph.</p>
        <ul class="prevunit">
            <li>First</li>
            <li>Second</li>
            <li>Third</li>
        </ul>
    </div>
</body>
</html>                            

Output

jQuery prevUnit() Method Example

Hello World

This is paragraph

This is another paragraph.

  • First
  • Second
  • Third

Leave a Reply

Your email address will not be published. Required fields are marked *