I’ve got a function that appends a <div>
to an element on click. The function gets the text of the clicked element and assigns it to a variable called name
. That variable is then used as the <div>
id
of the appended element.
I need to see if a <div>
id
with name
already exists before I append the element but I don’t know how to find this.
Here is my code:
$("li.friend").live('click', function() {
name = $(this).text();
// if-statement checking for existence of <div> should go here
// If <div> does not exist, then append element
$("div#chatbar").append("<div class='labels'><div id='" + name + "' style='display:none;'></div>" + name + "</div>");
// Else
alert('this record already exists');
});
This seems pretty straightforward but I’m getting the error “Unexpected end of file while searching for class name”. I have no clue what that means.
if (document.getElementById(name)) {
$("div#" + name).css({bottom: '30px'});
} else {
$("div#page-content div#chatbar").append("<div class='labels'>" + name + "</div><div id='" + name + "'></div>");
}
What’s more is that I want to be able to delete this element if I close it out which should then remove the div id [name]
from the document but .remove()
does not do this.
Here is the code for that:
$(".mini-close").live('click', function(){
$(this).parent().remove();
});
I added .mini-close
to the append function as a child of .labels
so there was a way to close out of the appended <div>
if needed. After clicking .mini-close
and attempting to click the same name again from li.friends
it still finds the div id [name]
and returns the first part of my if
statement.
This question is related to
javascript
jquery
if($("#id").length) /*exists*/
if(!$("#id").length) /*doesn't exist*/
Here is the jQuery function I use:
function isExists(var elemId){
return jQuery('#'+elemId).length > 0;
}
This will return a boolean value. If element exists, it returns true.
If you want to select element by class name, just replace #
with .
Nick's answer nails it. You could also use the return value of getElementById directly as your condition, rather than comparing it to null (either way works, but I personally find this style a little more readable):
if (document.getElementById(name)) {
alert('this record already exists');
} else {
// do stuff
}
You can handle it in different ways,
Objective is to check if the div exist then execute the code. Simple.
Condition:
$('#myDiv').length
Note:
#myDiv -> < div id='myDiv' > <br>
.myDiv -> < div class='myDiv' >
This will return a number every time it is executed so if there is no div it will give a Zero [0], and as we no 0 can be represented as false in binary so you can use it in if statement. And you can you use it as a comparison with a none number. while any there are three statement given below
// Statement 0
// jQuery/Ajax has replace [ document.getElementById with $ sign ] and etc
// if you don't want to use jQuery/ajax
if (document.getElementById(name)) {
$("div#page-content div#chatbar").append("<div class='labels'>" + name + "</div><div id='" + name + "'></div>");
}
// Statement 1
if ($('#'+ name).length){ // if 0 then false ; if not 0 then true
$("div#page-content div#chatbar").append("<div class='labels'>" + name + "</div><div id='" + name + "'></div>");
}
// Statement 2
if(!$('#'+ name).length){ // ! Means Not. So if it 0 not then [0 not is 1]
$("div#page-content div#chatbar").append("<div class='labels'>" + name + "</div><div id='" + name + "'></div>");
}
// Statement 3
if ($('#'+ name).length > 0 ) {
$("div#page-content div#chatbar").append("<div class='labels'>" + name + "</div><div id='" + name + "'></div>");
}
// Statement 4
if ($('#'+ name).length !== 0 ) { // length not equal to 0 which mean exist.
$("div#page-content div#chatbar").append("<div class='labels'>" + name + "</div><div id='" + name + "'></div>");
}
You can check by using jquery simply like this:
if($('#divId').length!==0){
Your Code Here
}
put the id you want to check in jquery is method.
var idcheck = $("selector").is("#id");
if(idcheck){ // if the selector contains particular id
// your code if particular Id is there
}
else{
// your code if particular Id is NOT there
}
Try to check the length of the selector, if it returns you something then the element must exists else not.
if( $('#selector').length ) // use this if you are using id to check
{
// it exists
}
if( $('.selector').length ) // use this if you are using class to check
{
// it exists
}
Use the first if condition for id and the 2nd one for class.
The most simple way is..
if(window["myId"]){
// ..
}
This is also part of HTML5 specs: https://www.w3.org/TR/html5/single-page.html#accessing-other-browsing-contexts#named-access-on-the-window-object
window[name]
Returns the indicated element or collection of elements.
if ( $( "#myDiv" ).length ) {
// if ( "#myDiv" ) is exist this will perform
$( "#myDiv" ).show();
}
Another shorthand way:
$( "#myDiv" ).length && $( "#myDiv" ).show();
Source: Stackoverflow.com