Try It Editor
Tip: Press
Ctrl/⌘ + Enter
to Run
▶ Run
Reset
Copy
Download
Code
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>filter() not() has()</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <style>.mark{background:#ffeb3b;}</style> </head> <body> <ul id="list"> <li class="x">One</li> <li>Two <span>child</span></li> <li class="x">Three</li> </ul> <button id="filt">filter(.x)</button> <button id="not">not(.x)</button> <button id="has">has(span)</button> <script> $("#filt").click(function(){ $("#list li").removeClass("mark").filter(".x").addClass("mark"); }); $("#not").click(function(){ $("#list li").removeClass("mark").not(".x").addClass("mark"); }); $("#has").click(function(){ $("#list li").removeClass("mark").has("span").addClass("mark"); }); </script> </body> </html>
Output