How to check if a div is visible state or not?
is(‘:visible’) checks the display property of an element, you can use css method.
if (!$("#singlechatpanel-1").css('visibility') === 'hidden') < // . >
If you set the display property of the element to none then your if statement returns true .
One question on why we can’t just use $(‘..’).css(‘display’) and check for none? CSS newbie here, so not sure :S
if element is hide by jquery then use
You can use .css() to get the value of «visibility»:
if( ! ( $("#singlechatpanel-1").css('visibility') === "hidden"))
if (!$('#singlechatpanel-1').css('display') == 'none') < alert('visible'); >else
You can use (‘:hidden’) method to find if your div is visible or not.. Also its a good practice to cache a element if you are using it multiple times in your code..
Add your li to a class, and do $(«.myclass»).hide(); at the start to hide it instead of the visibility style attribute.
As far as I know, jquery uses the display style attribute to show/hide elements instead of visibility (may be wrong on that one, in either case the above is worth trying)
You can do it by any of these two ways:
$("#elementId").css('visibility') and $("#elementId").is(':visible');
if your element is visible then
$("#elementId").css('visibility') will return "visible" and $("#elementId").is(':visible') will return true
but if your element is NOT visible then
$("#elementId").css('visibility') will return undefined and $("#elementId").is(':visible') will return false
Javascript — check if div contains a word?
Replacing // something with divs[i].style.background = «red»; still highlights the entire page. How to get a reference for the div containing «word»? Granted, the question doesn’t ask for that depth but for completion/curiosity it would be interesting.
node.textContent.includes('Some text');
if (document.getElementById('divId').innerHTML.indexOf("word") != -1)
Try the String.indexOf() function: if (divs[i].text.indexOf(‘word’) != -1)
You have to use a comparison operator not assign a variable.
I would recommend to use indexOf .
if (divs[i].text.indexOf('*word*') != -1)
In addition to what others said about using .indexOf() function, I'd like to say .text is not a div node property. User .innerHTML
if (divs[i].innerHTML.indexOf('word') > -1)<>
I might be wrong, but I think it's pretty clear the OP was looking to match text content, not markup.
var ok; ok = document.getElementById("ok").innerHTML if (ok.includes("world"))
Welcome to SO. Please take the time to explain your answer rather than just posting code. Especially since this is an old question with other answers, it's important to state why yours is different or improves on the others.
To get just the text of an element, the simple way is to use textContent or, were not supported, innerText . All browsers in use support one or the other (maybe both). You can also use a regular expression (indexOf works too, a RegExp is just an option) so:
var re = new RegExp('*' + word + '*'); if (re.test(div[i].innerText || div[i].textContent)) < // div[i] contains /*word*/ >
A more robust solution would be like:
function getText(el) < if (typeof el.textContent == 'string') < return el.textContent; >if (typeof el.innerText == 'string') < return el.innerText; >> var re = new RegExp('*' + word + '*'); if (re.test(getText(div[i]))) < // div[i] contains /*word*/ >
Check if element is a div
@Bjorn Right, and neither is this . $(this).get(0) takes this (a normal JS DOM node), converts it to a jQuery object, runs .get(0) , which selects the first regular DOM node within the jQuery object. that is, takes you back to where you started. this.tagName = $(this)[0].tagName = $(this).get(0).tagName .
Worth reminding to use .toLowerCase(), in case javascript decides to randomly return upper case names, even if the names are lower case in the html.
Solutions without jQuery are already posted, so I'll post solution using jQuery
To check if this element is DIV
if (this instanceof HTMLDivElement)
Same for HTMLUListElement for UL,
HTMLQuoteElement for blockquote
Beware using this if you have iframes and such. Each window has its own classes so this would return false even if the element is DIV, but from different window.
Without jQuery you can say this.tagName === 'DIV'
Keep in mind that the 'N' in tagName is uppercase.
if(this.tagName.toLowerCase() == "div") < //it's a div >else < //it's not a div >
edit: while I was writing, a lot of answers were given, sorry for doublure
Old question but since none of the answers mentions this, a modern alternative, without jquery, could be just using a CSS selector and Element.matches()
element.matches('div, ul, blockquote');
Going through jQuery you can use $(this).is('div') :
Check the current matched set of elements against a selector, element, or jQuery object and return true if at least one of these elements matches the given arguments.
Some of these solutions are going a bit overboard. All you need is tagName from regular old JavaScript. You don't really get any benefit from re-wrapping the whole thing in jQuery again, and especially running some of the more powerful functions in the library to check the tag name. If you want to test it on this page, here's an example.
let myElement =document.getElementById("myElementId"); if(myElement.tagName =="DIV")< alert("is a div"); >else < alert("is not a div"); >/*What ever you may need to know the type write it in capitalised letters "OPTIO" ,"PARAGRAPH", "SPAN" AND whatever */
I'm enhancing the answer of Andreq Frenkel, just wanted to add some and it became too lengthy so gone here.
Thinking about CustomElements extending the existing ones and still being able to check if an element is, say, input , makes me think that instanceof is the best solution for this problem.
One should be aware though, that instanceof uses referential equality, so HTMLDivElement of a parent window will not be the same as the one of its iframe (or shadow DOM's etc).
To handle that case, one should use checked element's own window's classes, something like:
element instanceof element.ownerDocument.defaultView.HTMLDivElement
check if the div id in JavaScript
I have project that concerns about calendars, at first i have 1 calendar and now i want to have another one but they have different values.
my question is, how can I check if div id is "calq" in javascript? if div.id == "calq" ? . at first i have .
function setMonthQuantity() < var weekdayBaseQuantity; weekdayBaseQuantity = >; $('td.calendar-day').append('' + weekdayBaseQuantity + ''); $('td.Sat .dayquantity, td.Sun .dayquantity').text( weekdayBaseQuantity ); >
Add some more info about the javascript you are using, is this part of a foreach loop? Are you using jQuery to get all your divs?
4 Answers 4
To determine the existence, in clean javascript
if(document.getElementById("calq")!='undefined') < // do something, it exists >
To check the id, in clean javascript
You can do check it, for example, via Jquery. I suppose that you want to make something like switch and for each div do some operation. If I'm right you can use Jquery's each function for looping against div elements and following condition for checking id's.
Yes, but @gadss doesn't give a lot information about what he wants to do. So, I wrote more general usage.
Seems like the best solution would be to pass in the div to the functions you are calling. That way you know the div you are dealing with. eg.
I am assuming the $('td.calendar-day') is in the calendar HTML? If so setMonthQuantity would be something like
function setMonthQuantity(calDiv) < var weekdayBaseQuantity; weekdayBaseQuantity = >; calDiv.closest('td.calendar-day').append('' + weekdayBaseQuantity + ''); calDiv.closest('td.Sat .dayquantity, td.Sun .dayquantity').text( weekdayBaseQuantity ); >
Using an if statement to check if a div is empty
I think this is close but I can't figure out how to write the code to test of #leftmenu is empty. Any help is appreciated!
10 Answers 10
Or you could just test the length property to see if one was found.
Keep in mind that empty means no white space either. If there's a chance that there will be white space, then you can use $.trim() and check for the length of the content.
if( !$.trim( $('#leftmenu').html() ).length ) < // .
trim() works perfect for me. Had to remove a column in Sharepoint that was adding some white space, in which trim() finds. Thanks.
@rogueleaderr Smart, didn't thought about using .text() because you could actually have some comment in the "empty" container and thus neither trim nor :empty would work. Thx
It depends what you mean by empty.
To check if there is no text (this allows child elements that are empty themselves):
To check if there are no child elements or text:
if ($('#leftmenu').contents().length == 0)
If you want a quick demo how you check for empty divs I'd suggest you to try this link:
Below you have some short examples:
If your div is empty without anything even no white-space, you can use CSS:
Unfortunately there is no CSS selector that selects the previous sibling element. There is only for the next sibling element: x ~ y
Using jQuery
Checking text length of element with text() function
if ( $('#leftmenu').text().length == 0 ) < // length of text is 0 >
Check if element has any children tags inside
if ( $('#leftmenu').children().length == 0 ) < // div has no other tags inside it >
Check for empty elements if they have white-space
if ( $.trim( $('.someDiv').text() ).length == 0 ) < // white-space trimmed, div is empty >