How to check a selector matches some content using jQuery?
In order to know whether the jQuery selector selected any element or not, Here 2 methods are discussed and these are mostly used methods.
Example-1: In this example, Selector searches for <p> element. This example uses the length property to check If something is selected or not. In this case <p> element is found.
<!DOCTYPE html> < html > < head > < title > JQuery | check if a selector matches something. </ title > < script src = </ script > </ head > < body style = "text-align:center;" id = "body" > < h1 style = "color:green;" > GeeksForGeeks </ h1 > < p > A computer science portal for geeks. </ p > < button onclick = "gfg_Run()" > check </ button > < p id = "GFG_DOWN" style="color:green; font-size: 20px;"> </ p > < script > var el_down = document.getElementById("GFG_DOWN"); var str = ''; function gfg_Run() { if ($("p").length) { str = "Something Selected"; } else { str = "Nothing Selected"; } el_down.innerHTML = str; } </ script > </ body > </ html > |
Output:
-
Before clicking on the button:
-
After clicking on the button:
Example-2: In this example, Selector searches for <a> element. This example also uses the length property to check, If something is selected or not. In this case <a> element is not found.
<!DOCTYPE html> < html > < head > < title > JQuery | check if a selector matches something. </ title > < script src = </ script > </ head > < body style = "text-align:center;" id = "body" > < h1 style = "color:green;" > GeeksForGeeks </ h1 > < p > A computer science portal for geeks. </ p > < button onclick = "gfg_Run()" > check </ button > < p id = "GFG_DOWN" style="color:green; font-size: 20px;"> </ p > < script > var el_down = document.getElementById("GFG_DOWN"); var str = ''; function gfg_Run() { if ($("a").length) { str = "Something Selected"; } else { str = "Nothing Selected"; } el_down.innerHTML = str; } </ script > </ body > </ html > |
Output:
-
Before clicking on the button:
-
After clicking on the button:
Example-3: In this example, Selector searches for <button> element. This example uses the exists function to check, If something is selected or not. In this case <button> element is found.
<!DOCTYPE html> < html > < head > < title > JQuery | check if a selector matches something. </ title > < script src = </ script > </ head > < body style = "text-align:center;" id = "body" > < h1 style = "color:green;" > GeeksForGeeks </ h1 > < p > A computer science portal for geeks. </ p > < button onclick = "gfg_Run()" > check </ button > < p id = "GFG_DOWN" style="color:green; font-size: 20px;"> </ p > < script > var el_down = document.getElementById("GFG_DOWN"); var str = ''; jQuery.fn.exists = function() { return this.length > 0; } function gfg_Run() { if ($("button").exists()) { str = "Something Selected"; } else { str = "Nothing Selected"; } el_down.innerHTML = str; } </ script > </ body > </ html > |
Output:
-
Before clicking on the button:
-
After clicking on the button:
Recommended Posts:
- How to copy the content of a div into another div using jQuery ?
- jQuery | Set Content and Attributes
- jQuery | Get Content and Attributes
- jQuery | :odd Selector
- jQuery | :first Selector
- jQuery | * Selector
- jQuery | :lt() Selector
- jQuery | :not() Selector
- jQuery | #id Selector
- jQuery | :gt() Selector
- jQuery | :last Selector
- jQuery | :contains() Selector
- jQuery | :even Selector
- jQuery | :has() Selector with example
- jQuery | [attribute$=value] Selector
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.