Try It Editor
Tip: Press
Ctrl/⌘ + Enter
to Run
▶ Run
Reset
Copy
Download
Code
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Using .end() to Step Back Up a Chain</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <style> #list{border:2px solid #ccc;padding:10px;width:200px;} #list.ready{border-color:#04AA6D;} li.item{color:#2196f3;} </style> </head> <body> <button id="btn">Run</button> <ul id="list"> <li>Apples</li> <li>Bananas</li> <li>Cherries</li> </ul> <script> $("#btn").on("click", function () { $("#list") .find("li") .addClass("item") .end() // back to '#list' .addClass("ready"); }); </script> </body> </html>
Output