This method select all the siblings of the selected element. <\/p>\n\n\n\n
<!DOCTYPE html>\n<html>\n<head>\n<style>\n.siblings { \n display: block;\n padding: 5px; \n color: gray;\n text-align: center;\n margin: 15px;\n}\n<\/style>\nhttps:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.4.1\/jquery.min.js<\/a>\n<script>\n$(document).ready(function(){\n $(\"p\").siblings().css({\"color\": \"blue\"});\n});\n<\/script>\n<\/head>\n<body class=\"siblings\">\n\n<div>Parent \n <p>child 1<\/p>\n <span>child 2<\/span>\n <p>child 3<\/p>\n <h3>child 4<\/h3>\n \n<\/div>\n\n<\/body>\n<\/html>\n<\/pre>\n\n\n\n![\"\"](\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2020\/04\/Screenshot-2020-04-06-at-12.51.11.png\")
<\/figure><\/li><\/ul><\/figure>\n\n\n\nJquery – next()<\/strong><\/p>\n\n\n\nThis method selects the next sibling of the given element.<\/p>\n\n\n\n
In the following method, it will select the next element of the <p> tag.<\/p>\n\n\n\n
<!DOCTYPE html>\n<html>\n<head>\n<style>\n.siblings { \n display: block;\n padding: 5px; \n color: gray;\n text-align: center;\n margin: 15px;\n}\n<\/style>\nhttps:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.4.1\/jquery.min.js<\/a>\n<script>\n$(document).ready(function(){\n $(\"p\").next().css({\"color\": \"blue\"});\n});\n<\/script>\n<\/head>\n<body class=\"siblings\">\n\n<div>Parent \n <p>child 1<\/p>\n <span>child 2<\/span>\n <p>child 3<\/p>\n <h3>child 4<\/h3>\n \n<\/div>\n\n<\/body>\n<\/html>\n<\/pre>\n\n\n\n![\"\"](\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2020\/04\/Screenshot-2020-04-06-at-13.02.41.png\")
<\/figure>\n\n\n\nJquery – nextAll()<\/strong><\/p>\n\n\n\nnextAll() method select all the next sibling of the given elemnt.<\/p>\n\n\n\n
The following method will select all the next sibling of the <h1>.<\/p>\n\n\n\n
<!DOCTYPE html>\n<html>\n<head>\n<style>\n.siblings { \n display: block;\n padding: 5px; \n color: gray;\n text-align: center;\n margin: 15px;\n}\n<\/style>\nhttps:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.4.1\/jquery.min.js<\/a>\n<script>\n$(document).ready(function(){\n $(\"h1\").nextAll().css({\"color\": \"blue\"});\n});\n<\/script>\n<\/head>\n<body class=\"siblings\">\n\n<div>Parent \n \n <span>child 1<\/span>\n <h1>child 2<\/h1>\n <p>child 3<\/p>\n \n <h3>child 4<\/h3>\n \n<\/div>\n\n<\/body>\n<\/html>\n<\/pre>\n\n\n\n![\"\"](\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2020\/04\/Screenshot-2020-04-06-at-13.08.26.png\")
<\/figure>\n\n\n\nJquery – nextUntil()<\/strong><\/p>\n\n\n\nThis method select all the elements between the given two-element.<\/p>\n\n\n\n
<!DOCTYPE html>\n<html>\n<head>\n<style>\n.siblings { \n display: block;\n padding: 5px; \n color: gray;\n text-align: center;\n margin: 15px;\n}\n<\/style>\nhttps:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.4.1\/jquery.min.js<\/a>\n<script>\n$(document).ready(function(){\n $(\"h1\").nextUntil(\"h4\").css({\"color\": \"blue\"});\n});\n<\/script>\n<\/head>\n<body class=\"siblings\">\n\n<div>Parent \n <h1>siblings<\/h1>\n <p>child 1<\/p>\n <h2>child 2<\/h2>\n <p>child 3<\/p>\n \n <h3>child 4<\/h3>\n <h4>child 5<\/h4>\n <h5>child 6<\/h5>\n \n<\/div>\n\n<\/body>\n<\/html>\n<\/pre>\n\n\n\n![\"\"](\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2020\/04\/Screenshot-2020-04-06-at-13.25.17.png\")
<\/figure>\n\n\n\nJquery – prev()<\/strong><\/p>\n\n\n\nThis method selects the previous element of the given element.<\/p>\n\n\n\n
The following method selects the previous siblings of the <p> tag.<\/p>\n\n\n\n
<!DOCTYPE html>\n<html>\n<head>\n<style>\n.siblings { \n display: block;\n padding: 5px; \n color: gray;\n text-align: center;\n margin: 15px;\n}\n<\/style>\nhttps:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.4.1\/jquery.min.js<\/a>\n<script>\n$(document).ready(function(){\n $(\"p\").prev().css({\"color\": \"blue\"});\n});\n<\/script>\n<\/head>\n<body class=\"siblings\">\n\n<div>Parent \n <h1>siblings<\/h1>\n <p>child 1<\/p>\n <h2>child 2<\/h2>\n <p>child 3<\/p>\n \n <h3>child 4<\/h3>\n <h4>child 5<\/h4>\n <h5>child 6<\/h5>\n \n<\/div>\n\n<\/body>\n<\/html>\n<\/pre>\n\n\n\n![\"\"](\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2020\/04\/Screenshot-2020-04-06-at-13.33.12.png\")
<\/figure>\n\n\n\nJquery – <\/strong>prevAll()<\/strong><\/p>\n\n\n\nThis method selects all the previous elements of the given element.<\/p>\n\n\n\n
<!DOCTYPE html>\n<html>\n<head>\n<style>\n.siblings { \n display: block;\n padding: 5px; \n color: gray;\n text-align: center;\n margin: 15px;\n}\n<\/style>\nhttps:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.4.1\/jquery.min.js<\/a>\n<script>\n$(document).ready(function(){\n $(\"h4\").prevAll().css({\"color\": \"blue\"});\n});\n<\/script>\n<\/head>\n<body class=\"siblings\">\n\n<div>Parent \n <h1>siblings<\/h1>\n <p>child 1<\/p>\n <h2>child 2<\/h2>\n <p>child 3<\/p>\n \n <h3>child 4<\/h3>\n <h4>child 5<\/h4>\n <h5>child 6<\/h5>\n \n<\/div>\n\n<\/body>\n<\/html>\n<\/pre>\n\n\n\n![\"\"](\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2020\/04\/Screenshot-2020-04-06-at-13.41.09.png\")
<\/figure>\n\n\n\n