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 prevAll() – Get All Previous Siblings</title> <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <style> body { font-family: Arial, sans-serif; background: #f0f0f0; padding: 30px; } h2 { color: #222; } .description { color: #555; margin-bottom: 20px; } .box { background: #fff; border: 2px solid #bbb; padding: 20px; width: 380px; } .step { background: #e0f7fa; border: 1px solid #00acc1; padding: 12px; margin: 8px 0; cursor: pointer; } .highlight { background: #ffe0b2; border-color: #fb8c00; } </style> </head> <body> <h2>jQuery prevAll() – Highlight All Previous Siblings</h2> <p class="description"> Click any step to highlight <strong>all elements before it</strong> using <kbd>prevAll()</kbd>. </p> <div class="box"> <div class="step">Step A</div> <div class="step">Step B</div> <div class="step">Step C</div> <div class="step">Step D</div> <div class="step">Step E</div> </div> <script> $(function () { $('.step').on('click', function () { $('.step').removeClass('highlight'); // Reset highlights $(this).prevAll().addClass('highlight'); // Highlight all previous siblings }); }); </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