如何查找jQuery中是否存在具有特定ID的div?


266

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

在添加元素之前,我需要查看是否已经存在<div> idwith 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语句的第一部分。


文件意外结尾通常归结为某个地方的语法错误。 $("div#" + name).css({bottom: '30px'});是错的,应该是$("div#" + name).css('bottom', '30px');
Jay Irvine,

Remove()将元素从DOM树中分离出来,但不会破坏它,因此按ID进行搜索仍会找到它,如果将其分配给变量,它仍然会存在,等等。这里的解决方案是确实找到它,将它附加到正确的div上(如果已经没有任何东西,如果它已被分离/移除,它将重新出现),如果找不到,则创建它。
杰伊·欧文

Answers:


539

您可以.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');
  }
});

98
非jQuery部分中的很多jQuery:p
jAndy 2010年

@Nick-这对我不起作用。在进行故障排除时,我警告了[name]的div ID的长度,但从未找到。
sadmicrowave

8
如果($(“#” + name).length){}正常,则不需要== 0。
ScottE 2010年

3
@ScottE-但是,这与事实相反!$("#"+name).length):)
Nick Craver

1
我认为你应该做===而不是看见 ==
危险89年

66

尼克的答案很明确。您还可以直接将getElementById的返回值用作条件,而不是将其与null进行比较(两种方法都可以,但是我个人觉得这种样式更具可读性):

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

没错,这很好用(我一定做得很蠢)。但是,当我用别的东西替换alert()时,出现一条错误消息:“搜索类名时文件意外结束”。为什么会这样呢?请参阅我的OP,了解我要用...替换我的alert()函数的内容
sadmicrowave

任何人有其他想法吗?
sadmicrowave

2
该错误听起来像是您缺少括号或分号。
Rikki 2014年

@Philo如果您希望将特定ID匹配数组中的内容
Beaniie

您在数组中有多个ID,并且要查找每个ID?蛮力方法将是遍历数组并为每个数组调用getElementById。
philo

31

尝试检查选择器的长度,如果选择器返回了某些内容,则该元素必须存在,否则不存在。

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
}

将第一个if条件用作id,将第二个if条件用作class。


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

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

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

}

另一种速记方式:

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

它只是if函数内部的一个示例,当存在将执行的id(“ #myDiv”)时,任何内容都可以编写。
Sanjib Debnath

5

您可以像下面这样使用jquery进行检查:

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

1
if($('#divId')。length!= 0){您的代码在这里}这是正确的
Santosh 2014年


3

这是我使用的jQuery函数:

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

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


2

您可以用不同的方式来处理它,

目的是检查div是否存在,然后执行代码。简单。

健康)状况:

$('#myDiv').length

注意:

#myDiv -> < div id='myDiv' > <br>
.myDiv -> < div class='myDiv' > 

它将在每次执行时返回一个数字,因此,如果没有div,它将给出一个零[0],并且由于我们没有0可以用二进制表示为false,因此可以在if语句中使用它。您可以将其用作无数字的比较。而下面给出了三个声明

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

1

将要检查的ID放在jquery中是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
}
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.