Try It Editor
Tip: Press
Ctrl/⌘ + Enter
to Run
▶ Run
Reset
Copy
Download
Code
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>siblings(), next(), prev()</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <style>.cur{background:#c8e6c9;} .sib{background:#ffe0b2;}</style> </head> <body> <ul id="list"> <li>One</li><li class="pick">Two</li><li>Three</li><li>Four</li> </ul> <button id="siblings">Highlight siblings</button> <button id="next">Next</button> <button id="prev">Prev</button> <script> $("#siblings").click(function(){ $(".pick").toggleClass("cur").siblings().toggleClass("sib"); }); $("#next").click(function(){ $(".pick").next().toggleClass("sib"); }); $("#prev").click(function(){ $(".pick").prev().toggleClass("sib"); }); </script> </body> </html>
Output