如何找到jQuery中是否存在具有特定id的div？

Question

我有一个函数<div>在点击时附加一个元素.该函数获取被点击元素的文本并将其分配给一个名为的变量name.然后将该变量用作<div> id附加元素的变量.

我需要看是否<div> id与name之前我追加的元素已经存在,但我不知道怎么找这个.

这是我的代码:

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

这看起来非常简单,但我收到错误" 搜索类名时文件意外结束".我不知道这意味着什么.

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

更重要的是,我希望能够删除此元素,如果我将其关闭,然后应该div id [name]从文档中删除但.remove()不执行此操作.

这是代码:

$(".mini-close").live('click', function(){
  $(this).parent().remove();
});

我.mini-close作为一个孩子添加到append函数,.labels所以<div>如果需要,有一种方法可以关闭附加的内容.单击.mini-close并尝试再次从中单击相同的名称li.friends仍然找到div id [name]并返回我的if语句的第一部分.

Answer 1

您可以.length在选择器后面使用它来查看它是否与任何元素匹配,如下所示:

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

完整版:

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

或者,这部分的非jQuery版本(因为它是一个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');
  }
});

Answer 2

尼克的回答指出了它.您也可以直接使用getElementById的返回值作为条件,而不是将其与null进行比较(无论哪种方式都有效,但我个人认为这种风格更具可读性):

if (document.getElementById(name)) {
  alert('this record already exists');
} else {
  // do stuff
}

Answer 3

尝试检查选择器的长度,如果它返回一些东西,那么元素必须存在,否则不存在.

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
}

使用id的第一个if条件和class的第二个条件.

Answer 4

if($("#id").length) /*exists*/

if(!$("#id").length) /*doesn't exist*/

Answer 5

if ( $( "#myDiv" ).length ) {
    //id id ( "#myDiv" ) is exist this will perform
    $( "#myDiv" ).show();

}

另一种简写方式:

    $( "#myDiv" ).length && $( "#myDiv" ).show();

Answer 6

最简单的方法是..

if(window["myId"]){
    // ..
}

这也是 HTML5 规范的一部分：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.

Answer 7

您可以使用jquery进行检查,如下所示:

if($('#divId').length!==0){
      Your Code Here
}

Answer 8

这是我使用的 jQuery 函数：

function isExists(var elemId){
    return jQuery('#'+elemId).length > 0;
}

这将返回一个布尔值。如果元素存在，则返回真。如果要按类名选择元素，只需替换#为.