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

IT技术 javascript jquery
2021-03-12 22:27:58

我有一个函数，<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语句的第一部分。

6个回答

您可以.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');
  }
});
我认为你应该做===而不是看到 ==。
2021-04-17 22:27:58
@Nick - 这对我不起作用。在进行故障排除时，我提醒了 [name] 的 div id 的长度，但它从未找到它。
2021-04-18 22:27:58
不需要检查 == 0 if($("#" + name).length) { } 工作得很好。
2021-04-21 22:27:58
@ScottE - 不过，这是相反的，你的意思是!$("#"+name).length):)
2021-04-24 22:27:58
非 jQuery 部分中有很多 jQuery :p
2021-04-28 22:27:58

尼克的回答说明了这一点。您也可以直接使用 getElementById 的返回值作为您的条件，而不是将其与 null 进行比较（无论哪种方式都有效，但我个人认为这种样式更具可读性）：

if (document.getElementById(name)) {
  alert('this record already exists');
} else {
  // do stuff
}
任何人的任何其他想法？
2021-04-20 22:27:58
您在一个数组中有多个 ID，并且想要找到它们中的每一个？蛮力方法是遍历数组并为每个数组调用 getElementById。
2021-04-22 22:27:58
你是对的，这很好用（我一定是在做一些愚蠢的事情）。但是，当我用其他东西替换 alert() 时，我收到一条错误消息：“搜索类名时出现意外的文件结尾”。为什么会这样？请参阅我的 OP，了解我将使用什么替换 alert() 函数...
2021-04-30 22:27:58
该错误听起来像是缺少括号或分号。
2021-04-30 22:27:58
@Philo 如果您希望将数组中保存的特定 ID 与
2021-05-10 22:27:58

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

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 条件。

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

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

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

}

另一种速记方式：

    $( "#myDiv" ).length && $( "#myDiv" ).show();
它只是 if 函数中的一个示例，当 id ( "#myDiv" ) 存在时，任何东西都可以写入。
2021-05-13 22:27:58
其它你可能感兴趣的问题
上一篇如何将依赖于 jQuery 的 Javascript 小部件嵌入到未知环境中 下一篇Javascript：最佳单例模式