Using jQuery I'm programmatically generating a bunch of div's like this:
<div class="mydivclass" id="myid1">Some Text1</div>
<div class="mydivclass" id="myid2">Some Text2</div>
Somewhere else in my code I need to detect if these DIVs exist. The class name for the divs is the same but the ID changes for each div. Any idea how to detect them using jQuery?
You can simplify this by checking the first object that is returned from JQuery like so:
if ($(".mydivclass")[0]){
// Do something if class exists
} else {
// Do something if class does not exist
}
In this case if there is a truthy value at the first ([0]) index, then assume class exists.
Edit 04/10/2013: I've created a jsperf test case here.
:first on there would help performance (don't know if performance is an important criterion for @itgorilla), but whether it does varies wildly by browser, presumably because it changes the native features jQuery can use to do the selection. Here's a test case where the div exists, and here's one where it doesn't exist. –
Warnerwarning if (!$(".mydivclass")[0]){ /* do stuff */ } –
Goodale You can use size(), but jQuery recommends you use length to avoid the overhead of another function call:
$('div.mydivclass').length
So:
// since length is zero, it evaluates to false
if ($('div.mydivclass').length) {
UPDATE
The selected answer uses a perf test, but it's slightly flawed since it is also including element selection as part of the perf, which is not what's being tested here. Here is an updated perf test:
http://jsperf.com/check-if-div-exists/3
My first run of the test shows that property retrieval is faster than index retrieval, although IMO it's pretty negligible. I still prefer using length as to me it makes more sense as to the intent of the code instead of a more terse condition.
.length currently offers the best average performance. –
Panada Native JavaScript is always going to be faster. In this case: (example)
if (document.querySelector('.mydivclass') !== null) {
// .. it exists
}
If you want to check to see if a parent element contains another element with a specific class, you could use either of the following. (example)
var parent = document.querySelector('.parent');
if (parent.querySelector('.child') !== null) {
// .. it exists as a child
}
Alternatively, you can use the .contains() method on the parent element. (example)
var parent = document.querySelector('.parent'),
child = document.querySelector('.child');
if (parent.contains(child)) {
// .. it exists as a child
}
..and finally, if you want to check to see if a given element merely contains a certain class, use:
if (el.classList.contains(className)) {
// .. el contains the class
}
$('div').hasClass('mydivclass')// Returns true if the class exist.
div elements on the page, then go back and loop through them to see whether they have that class, all to throw away the array at the end). –
Warnerwarning hasClass is 33% faster then the other selectors on here. Check jsperf.com/hasclass00 –
Hollingsworth div elements) that side-steps the very issue I highlighted (building the array). Try it with a bunch of divs: jsperf.com/hasclass00/2 It's 63% slower on my copy of Chrome, 43% slower on my copy of Firefox, 98% (!) slower on Opera. But moreover, it makes sense that it's slower to build up a list of divs and then search it, rather than giving the selector engine all the information it needs. –
Warnerwarning id values.) Just a sec. –
Warnerwarning hasClass is slower. If nearly all divs have the class, hasClass is faster on the big browsers. I know which I think is more realistic. –
Warnerwarning hasClass was better there. jsperf.com/hasclass02-half-match Still unrealistic (to my mind; same class on half the divs on your page = suggests problem), but interesting nevertheless. I'll also point out that none of these tests measures the memory impact, which can be an issue for long-running pages (apps). –
Warnerwarning id values), jsperf.com/hasclass00/3: hasClass is 24% slower on Chrome 10, 42% slower on Firefox 3.6, 96% slower on Opera 11 (all on Linux); on Windows 7, it's 11% slower on Chrome 10, 48% slower on IE9, 69% slower on Safari, and I get varying results between a tie and length being ~20% slower on Firefox 3.6. On Windows XP using IE7, 35% slower. Look at the browserscope. (cont'd) –
Warnerwarning 1 for "# of tests", I've done multiple with each and I expect you did with FF4.) My test cases with a sig. number of divs show that when the number of non-matching divs increases, the hasClass solution degrades, presumably because the avoidable array gets bigger. People use a lot of divs on their pages. Anyway, the test cases are there for anyone to try (@lurkers: mind the date/times on them), and separately I think I've made my theoretical point. This has all be a lot more time than either of us should have spent. Peace, –
Warnerwarning Here is a solution without using Jquery
var hasClass = element.classList.contains('class name to search');
// hasClass is boolean
if(hasClass === true)
{
// Class exists
}
reference link
It's quite simple...
if ($('.mydivclass').length > 0) {
//do something
}
To test for div elements explicitly:
if( $('div.mydivclass').length ){...}
.mydivclass depending on browser and jQuery version. –
Hellhound div part of the selector. –
Warnerwarning Here are some ways:
1. if($("div").hasClass("mydivclass")){
//Your code
//It returns true if any div has 'mydivclass' name. It is a based on the class name
}
2. if($("#myid1").hasClass("mydivclass")){
//Your code
// It returns true if specific div(myid1) has this class "mydivclass" name.
// It is a based on the specific div id's.
}
3. if($("div[class='mydivclass']").length > 0){
//Your code
// It returns all the divs whose class name is "mydivclass"
// and it's length would be greater than one.
}
We can use any one of the abobe defined ways based on the requirement.
The simple code is given below :
if ($('.mydivclass').length > 0) {
//Things to do if class exist
}
To hide the div with particuler id :
if ($('#'+given_id+'.mydivclass').length > 0) {
//Things to do if class exist
}
Best way is to check the length of the class as shown below:
if ($('.myDivClass').length) {
In Jquery you can use like this.
if ($(".className")[0]){
// Do something if class exists
} else {
// Do something if class does not exist
}
With JavaScript
if (document.getElementsByClassName("className").length > 0) {
// Do something if class exists
}else{
// Do something if class does not exist......
}
if ($("#myid1").hasClass("mydivclass")){// Do any thing}
Use this to search whole page
if($('*').hasClass('mydivclass')){
// Do Stuff
}
Here is very sample solution for check class (hasClass) in Javascript:
const mydivclass = document.querySelector('.mydivclass');
// if 'hasClass' is exist on 'mydivclass'
if(mydivclass.classList.contains('hasClass')) {
// do something if 'hasClass' is exist.
}
check if the div exists with a certain class
if ($(".mydivclass").length > 0) //it exists
{
}
if($(".myClass")[0] != undefined){
// it exists
}else{
// does not exist
}
The best way in Javascript:
if (document.getElementsByClassName("search-box").length > 0) {
// do something
}
if ($(".mydivclass").size()){
// code here
}
The size() method just returns the number of elements that the jQuery selector selects - in this case the number of elements with the class mydivclass. If it returns 0, the expression is false, and therefore there are none, and if it returns any other number, the divs must exist.
length property? Also, this checks for any element with that class, not just a div. (Now, that may be what the OP meant, even if not what he/she said.) See Stefan Kendall's answer which does what the OP actually said (even though, again, they may have meant what you've done). –
Warnerwarning div part, for two reasons: 1) the selector is not that bounded to the fact that OP uses a div element (it could change in the future), and 2) in most browsers and versions of jQuery, AFAIK, this should be faster. –
Centering length property is there, why not use it? But if it's your preference, fair 'nuff. On the other, I didn't know you'd edited it out. If I were going to do that, I'd've left it in (again, he specifically said "...if div with..." (my emphasis) and then mentioned additionally that if it didn't matter whether it was a div or not, you could ditch that part. But whatever. :-) –
Warnerwarning size() method is there to make it clear that you're counting the number of elements in a jQuery selector, and not just any old array. But again, that's just my preference. –
Centering var x = document.getElementsByClassName("class name");
if (x[0]) {
alert('has');
} else {
alert('no has');
}
jQuery(function($){
$("#btn1").click(function(){
if($(this).hasClass("demo")){
alert("HAS");
} else {
alert("NO HAS");
}
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btn1" class="demo">Show Text</button>© 2022 - 2024 — McMap. All rights reserved.