Codelab Editor
Free Online HTML Editor
Run
Learn jQuery
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>jQuery prev() – Get Previous Sibling</title> <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <style> body { font-family: Arial, sans-serif; background: #f5f5f5; padding: 30px; } h2 { color: #333; } .description { color: #666; margin-bottom: 20px; } .list { border: 2px solid #bbb; background: #fff; padding: 20px; width: 380px; } .item { padding: 12px; margin: 8px 0; border: 1px solid #aaa; background: #e0f7fa; cursor: pointer; } .highlight { background: #ffe082; border-color: #ffa000; } </style> </head> <body> <h2>jQuery prev() – Select Previous Sibling</h2> <p class="description"> Click any box to highlight its <strong>immediate previous sibling</strong> using the <kbd>prev()</kbd> method. </p> <div class="list"> <div class="item">Step 1</div> <div class="item">Step 2</div> <div class="item">Step 3</div> <div class="item">Step 4</div> </div> <script> $(function () { $('.item').on('click', function () { $('.item').removeClass('highlight'); // Reset all highlights $(this).prev().addClass('highlight'); // Highlight previous sibling }); }); </script> </body> </html>
Editor Commands
Ctrl
F
Find
Ctrl
G
Find Next
Ctrl
⇧
G
Find Previous
Ctrl
⇧
F
Find & Replace
Ctrl
]
Indent Code Right
Ctrl
[
Indent Code Left
⇧
Tab
Auto Indent Code
Ctrl
/
Line Comment
Ctrl
Alt
/
Block Comment
TutsInsider Actions
Alt
S
Run Code
Ctrl
C
Copy Editor Code
Ctrl
A
Select All Editor Code
Ctrl
S
Save/Download
Ctrl
Alt
X
Rotate
Ctrl
Alt
T
Switch Theme
Ctrl
⇧
C
Open Console
Esc
Close Console