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

Posted 2023-02-19

【中文标题】如何查找 jQuery 中是不是存在具有特定 id 的 div？

【英文标题】：How to find if div with specific id exists in jQuery?如何查找 jQuery 中是否存在具有特定 id 的 div？

【发布时间】：2011-03-23 08:56:39

【问题描述】：

我有一个函数可以在点击时将<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 作为.labels 的子函数添加到append 函数中，因此如果需要，可以关闭附加的<div>。单击.mini-close 并尝试从li.friends 再次单击相同的名称后，它仍然会找到div id [name] 并返回我的if 语句的第一部分。

【问题讨论】：

文件意外结束通常归结为某处的语法错误。 $("div#" + name).css(bottom: '30px');错了，应该是$("div#" + name).css('bottom', '30px');

Remove() 将元素从 DOM 树中分离，但不会破坏它，因此通过 ID 搜索仍会找到它，如果您将其分配给变量，它仍会存在，等等。这里的解决方案是，如果你找到它，将其附加到正确的 div（如果它已经存在，则不会发生任何事情，如果它已被分离/删除，它将重新出现），如果找不到，则创建它。

***.com/q/31044/12101554 的重复（但不标记为重复，因为这是一个流行的古老问题）（只是想将它们链接在一起）

【参考方案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');
  
);

【讨论】：

很多 jQuery 在非 jQuery 部分：p

@Nick - 这对我不起作用。在进行故障排除时，我提醒了 [name] 的 div id 的长度，但它从未找到它。

检查 == 0 不是必需的 if($("#" + name).length) 工作得很好。

@ScottE - 反之亦然，你的意思是!$("#"+name).length) :)

我认为你应该使用=== 而不是看到==。

【参考方案2】：

尼克的回答很到位。您也可以直接使用 getElementById 的返回值作为您的条件，而不是将其与 null 进行比较（无论哪种方式都可以，但我个人觉得这种风格更具可读性）：

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

【讨论】：

你是对的，这很好用（我一定是在做一些愚蠢的事情）。但是，当我将 alert() 替换为其他内容时，我收到一条错误消息：“搜索类名时文件意外结束”。为什么会这样？请参阅我的 OP，了解我将 alert() 函数替换为...

任何人的其他想法？

这个错误听起来像是缺少括号或分号。

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

您在一个数组中有多个 ID，并且您想找到每个 ID？蛮力方法是遍历数组并为每个数组调用 getElementById。

【参考方案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 使用第二个 if 条件。

【参考方案4】：

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

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

【参考方案5】：

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

另一种速记方式：

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

【讨论】：

这只是 if 函数中的一个例子，任何东西都可以写，当 id ("#myDiv") 存在时会执行。

【参考方案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.

【讨论】：

这看起来不错，但现在有一个注释w3.org/TR/html5/… 说“依赖这个会导致脆弱的代码”。

【参考方案7】：

您可以像这样使用 jquery 进行检查：

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

【讨论】：

if($('#divId').length!= 0) Your Code Here 这是正确的

【参考方案8】：

这是我使用的 jQuery 函数：

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

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

【参考方案9】：

你可以用不同的方式处理它，

目的是检查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>");
    

【参考方案10】：

在jquery中输入你要检查的id是方法。

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