Try It Editor
Tip: Press
Ctrl/⌘ + Enter
to Run
▶ Run
Reset
Copy
Download
Code
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Traversal Chain</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <style>.card{border:1px solid #aaa; padding:8px; margin:8px;} .title{font-weight:bold;} .hit{background:#e1f5fe;}</style> </head> <body> <div id="grid"> <div class="card"><div class="title">A</div><ul><li>1</li><li>2</li></ul></div> <div class="card"><div class="title">B</div><ul><li>3</li><li>4</li></ul></div> </div> <button id="go">Traverse</button> <script> $("#go").click(function(){ $("#grid .card").first().find("ul li").eq(1).closest(".card").find(".title").toggleClass("hit"); }); </script> </body> </html>
Output