JQuery Siblings

 15 - Oct - 2021
 XpertPhp
 26

In this tutorial, there are several methods available for jQuery Siblings, and the methods are used to get the sibling element for the specified elements.

jQuery siblings() Method

The jQuery siblings() method is used to get all sibling elements of the specified element.

Example

<!DOCTYPE html>
<html>
<head>
<style>
    .highlight{
        border:1px solid #000;
    }        
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").siblings().addClass("highlight"); 
  });
});
</script>
</head>
<body>
  <div class="box">
     <h1>Hello World</h1>
        <p>This is a paragraph tag.</p>
        <ul>
            <li>List 1</li>
            <li>List 2</li>
        </ul>
   </div>
  <button>Click here</button>
</body>
</html>

jQuery next() Method

The jQuery next() method is used to get the next sibling element of the specified element.

The following example returns only next sibling element.

Example

<!DOCTYPE html>
<html>
<head>
<style>
    .highlight{
        border:1px solid #000;
    }        
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").next().addClass("highlight"); 
  });
});
</script>
</head>
<body>
  <div class="box">
        <h1>Hello World</h1>
        <p>This is a paragraph tag.</p>
        <ul>
            <li>List 1</li>
            <li>List 2</li>
        </ul>
   </div>
  <button>Click here</button>
</body>
</html>

jQuery nextAll() Method

The jQuery nextAll() method is used to get all the next sibling elements of the specified element.

The following example returns next to all sibling elements.

Example

<!DOCTYPE html>
<html>
<head>
<style>
    .highlight{
        border:1px solid #000;
    }        
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("h1").nextAll().addClass("highlight"); 
  });
});
</script>
</head>
<body>
  <div class="box">
        <h1>Hello World</h1>
        <p>This is a paragraph tag.</p>
        <ul>
            <li>List 1</li>
            <li>List 2</li>
        </ul>
   </div>
  <button>Click here</button>
</body>
</html>

jQuery nextUntil() Method

The jQuery nextUntil() method is used to get all the next elements between two given arguments.

The following example returns all sibling elements between a element <h1> and <h6> element.

Example

<!DOCTYPE html>
<html>
<head>
<style>
    .highlight{
        border:1px solid #000;
    }        
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("h1").nextUntil("h6").addClass("highlight"); 
  });
});
</script>
</head>
<body>
  <div class="box">
        <h1>Hello World</h1>
        <h6>Hello World</h6>
        <p>This is a paragraph tag.</p>
        <ul>
            <li>List 1</li>
            <li>List 2</li>
        </ul>
   </div>
  <button>Click here</button>
</body>
</html>

jQuery prev() Method

The jQuery prev() method is used to get the previous sibling element of the specified element.

The following example returns previous sibling elements.

Example

<!DOCTYPE html>
<html>
<head>
<style>
    .highlight{
        border:1px solid #000;
    }        
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").prev().addClass("highlight"); 
  });
});
</script>
</head>
<body>
  <div class="box">
        <h1>Hello World</h1>
        <p>This is a paragraph tag.</p>
        <ul>
            <li>List 1</li>
            <li>List 2</li>
        </ul>
   </div>
  <button>Click here</button>
</body>
</html>

jQuery prevAll() Method

The jQuery prevAll() method is used to get all the previous sibling elements of the specified element.

The following example returns previous all sibling elements.

Example

<!DOCTYPE html>
<html>
<head>
<style>
    .highlight{
        border:1px solid #000;
    }        
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("ul").prevAll().addClass("highlight"); 
  });
});
</script>
</head>
<body>
  <div class="box">
        <h1>Hello World</h1>
        <p>This is a paragraph tag.</p>
        <ul>
            <li>List 1</li>
            <li>List 2</li>
        </ul>
   </div>
  <button>Click here</button>
</body>
</html>

jQuery prevUntil() Method

The jQuery prevUntil() method is used to get all the previous elements between two given arguments.

The following example returns all sibling elements between a element <h6> and <h1> element.

Example

<!DOCTYPE html>
<html>
<head>
<style>
    .highlight{
        border:1px solid #000;
    }        
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("h6").nextUntil("h1").addClass("highlight"); 
  });
});
</script>
</head>
<body>
  <div class="box">
        <h1>Hello World</h1>
        <h6>Hello World</h6>
        <p>This is a paragraph tag.</p>
        <ul>
            <li>List 1</li>
            <li>List 2</li>
        </ul>
   </div>
  <button>Click here</button>
</body>
</html>

Recent Posts

Popular Posts