sadmicrowave sadmicrowave - 5 months ago 9
jQuery Question

jquery how to find if div with specific id exists

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 EXISTING 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');


UPDATE////

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>");
};


this seems pretty straightforward but I'm getting an error back "unexpected end of file while searching for class name" (I have no clue what that means).

Whats 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...

Answer

You can use .length after the selector to see if it matched any elements, like this:

if($("#" + name).length == 0) {
  //it doesn't exist
}

The full version:

$("li.friend").live('click', function(){
  name = $(this).text();
  if($("#" + name).length == 0) {
    $("div#chatbar").append("<div class='labels'><div id='" + name + "' style='display:none;'></div>" + name + "</div>");
  } else {
    alert('this record already exists');
  }
});

Or, the non-jQuery version for this part (since it's an ID):

$("li.friend").live('click', function(){
  name = $(this).text();
  if(document.getElementById(name) == null) {
    $("div#chatbar").append("<div class='labels'><div id='" + name + "' style='display:none;'></div>" + name + "</div>");
  } else {
    alert('this record already exists');
  }
});
Comments