Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to check an element exist or not in jQuery?
Overview
We can check for an HTML element such as
,
Syntax
The syntax used in this program is ?
$(elementName).length;
-
elementName ?The elementName can be any tag, class name, id name which is used to build the structure of the web page. Such as
,
length ?length is a property of jQuery object which checks the occurrence of an element in HTML.
Algorithm
Step 1 ? Create some elements in the HTML body such as p, span, label, etc. and add a CDN link in the head tag of HTML.
Step 2 ? Use jQuery syntax, select the button as selector and perform a click() event method.
Step 3 ? Select some elements from HTML using $(selectors) and check the length of the elements using the length method. Store the length of these elements in separate variables.
Step 4 ? Display the output on screen. If the length method returns value greater than zero then that element exists, otherwise if it returns value equals to zero then the element does not exist.
Example
In this example we have to search for certain elements in this such as
, class "para",
<!DOCTYPE html>
<html lang="en">
<head>
<title>Element exist or not using jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<style>
body {
color: white;
background-color: #0a0a0a;
display: flex;
place-content: center;
min-height: 90vh;
flex-direction: column;
text-align: center;
}
p {
width: 50%;
margin: 8px auto;
padding: 0.4rem;
}
button {
border: none;
width: 8rem;
padding: 0.4rem;
background-color: #0a0a0a;
box-shadow: 0px 0px 5px rgba(255, 255, 255, 0.788);
border-radius: 5px;
margin: 8px auto;
color: white;
}
</style>
</head>
<body>
<p></p>
<p></p>
<p></p>
<span></span><span></span>
<h1>Check the element by clicking button</h1>
<span style="color: rgb(112, 128, 144); font-family: "Liberation Mono", Consolas, Menlo, Courier, monospace; font-size: 14px;"><!-- </span>This <button> tag will trigger the jQuery arrow function -->
<button>Check Element</button>
<!-- Output of the length will shown here -->
<p id="output" style="text-align:start;background-color: green; width: 8rem;">
1) p: <span id="pl"></span><br />
2) para(class): <span id="pal"></span><br />
3) label: <span id="ll"></span><br />
4) span: <span id="sl"></span><br />
</p>
<script>
// The jQuery function start from here
$("button").click(() => {
var pel = $("p").length;
var pael = $(document.getElementsByClassName("para")).length;
var lel = $("label").length;
var sel = $("span").length;
$(document.getElementById("pl")).text(pel);
$(document.getElementById("ll")).text(lel);
$(document.getElementById("sl")).text(sel);
})
</script>
</body>
</html>
The output shows the existing element in the HTML. In the below output, the above code contains 4
tags, 2
tags with "para" class names, and in the jQuery function, it has also checked for the
Conclusion
The return type of the length property is "Number." When the element exists in the HTML structure it returns the number which is greater than ?0?. If the element does not exist in the HTML element, then it returns 0 or null. The length property finds the element in the hierarchical order, and returns all the total number of the specific tags that are present in the HTML. The length property in jQuery is different from that in JavaScript because in JavaScript, the length method returns the size of the array, while in jQuery it returns the number of elements present in the HTML. The jQuery selectors select the HTML element and allow for further manipulations. The various jQuery selectors are ?*? this selects all the element in the HTML, ?#id? select the elements with the specific id name, ?.className? is used to select that particular element.
4K+ Views
