Try It Editor
Tip: Press
Ctrl/⌘ + Enter
to Run
▶ Run
Reset
Copy
Download
Code
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Positional Filters</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <style>.hit{background:#ffcdd2;}</style> </head> <body> <ul id="list"><li>0</li><li>1</li><li>2</li><li>3</li><li>4</li></ul> <button id="first">:first</button> <button id="last">:last</button> <button id="eq">:eq(2)</button> <button id="lt">:lt(3)</button> <button id="gt">:gt(1)</button> <button id="odd">:odd</button> <button id="even">:even</button> <script> function reset(){ $("#list li").removeClass("hit"); } $("#first").click(function(){ reset(); $("#list li:first").addClass("hit"); }); $("#last").click(function(){ reset(); $("#list li:last").addClass("hit"); }); $("#eq").click(function(){ reset(); $("#list li:eq(2)").addClass("hit"); }); $("#lt").click(function(){ reset(); $("#list li:lt(3)").addClass("hit"); }); $("#gt").click(function(){ reset(); $("#list li:gt(1)").addClass("hit"); }); $("#odd").click(function(){ reset(); $("#list li:odd").addClass("hit"); }); $("#even").click(function(){ reset(); $("#list li:even").addClass("hit"); }); </script> </body> </html>
Output