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:
Last Updated :
21 May, 2019
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...