如何检查一个 div 是否包含另一个 div?

2023-12-14

如果我的父 div 有一个仅使用 JavaScript 的子 div,我需要显示警报,而不使用 jQuery。

我尝试过使用contains()函数来检查我的 div 并发送警报,但它不起作用。

<script type="text/javascript">
  var parentDiv = document.getElementById("commentBox");
  var childDiv = document.getElementById("comment1");
  if (parentDiv.contains(childDiv)) {
    alert("yes");
  } else
  {
    alert("no");
  }
</script>
<div class="row leftpad collapse" id="commentBox">
  <div id="comment1">
    <div class="col-md-3 dir-rat-left"> <i class="fa fa-user-circle" aria-hidden="true"></i>
      <h6>James </h6>
    </div>
    <div class="col-md-9 dir-rat-right">
      <p class="removemarg">always available, always helpfull that goes the same for his team that work with him - definatley our first phone call.</p>
    </div>
  </div>
</div>

应该有一个带有消息的警报框yes在其中但不可见。我也尝试过使用以下命令检查 JavaScriptalert()仅方法,无需任何代码。


您的代码在 DOM 完全加载之前运行。将脚本移至页面底部:

<div class="row leftpad collapse" id="commentBox" >
    <div id="comment1">
      <div class="col-md-3 dir-rat-left"> <i class="fa fa-user-circle" aria-hidden="true"></i>
        <h6>James </h6>
      </div>
      <div class="col-md-9 dir-rat-right">
        <p class="removemarg">always available, always helpfull that goes the same for his team that work with him - definatley our first phone call.</p>
      </div>
    </div>
</div>
    
<script type="text/javascript">
  var parentDiv = document.getElementById("commentBox");
  var childDiv = document.getElementById("comment1");
  if (parentDiv.contains(childDiv)) {
    alert("yes");
  }
  else{
    alert("no");
  }

</script>

OR:将代码包裹起来DOM内容已加载这将确保放置在其中的代码仅在 DOM 完全加载后才会执行:

<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function(event) {
    var parentDiv = document.getElementById("commentBox");
    var childDiv = document.getElementById("comment1");
    if (parentDiv.contains(childDiv)) {
      alert("yes");
    }
    else{
      alert("no");
    }
  });

</script>

<div class="row leftpad collapse" id="commentBox" >
    <div id="comment1">
      <div class="col-md-3 dir-rat-left"> <i class="fa fa-user-circle" aria-hidden="true"></i>
        <h6>James </h6>
      </div>
      <div class="col-md-9 dir-rat-right">
        <p class="removemarg">always available, always helpfull that goes the same for his team that work with him - definatley our first phone call.</p>
      </div>
    </div>
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何检查一个 div 是否包含另一个 div? 的相关文章

随机推荐

  • 在Python中序列化二进制数据

    我有一些二进制数据 在 Python 中以字节字符串数组的形式存在 是否有一种可移植的方法来序列化其他语言可以读取的数据 JSON 失败是因为我刚刚发现它没有真正的方法来存储二进制数据 它的字符串应该是 Unicode 我不想使用pickl
  • 在浏览器中执行jdbc小程序

    import java sql import java io import java awt import java awt event import java applet public class A0 extends Applet i
  • 使用连字符时 Spring 表达式语言 (SpEL) 不起作用

    我正在尝试使用 Spring 表达式语言来解析表达式 if myVariable值设置为 first name 带连字符的值 然后获取class org springframework expression spel SpelParseEx
  • 使用 Java 将 ASN1 序列解码为 RSA 公钥

    我有以下 RSA 公钥作为 ASN1 序列 SEQUENCE 2 elem INTEGER 1024 bit 14832 INTEGER 65537 如何在 Java 中将此序列导入为 RSA 公钥 已实施的KeySpecs 例如PKCS8
  • 可以采取哪些措施来防止对返回值进行误导性分配?

    使用 C 多年后 我意识到使用自定义类时语法中的一个怪癖 尽管是正确的语言行为它允许创建非常具有误导性的界面 这里的例子 class complex arg double r double phi public std complex
  • Gulp 注入不起作用

    我尝试使用 gulp inject 将一些文件注入 PHP 文件 这是行不通的 我也尝试过使用 HTML 但这不起作用 我的控制台中的输出显示 gulp inject 6 files into test html 但是没有注入文件 文件数是
  • 在 XCode 11 上哪里可以找到“Log Dyld API 使用情况”和“Log Library Loads”?

    我想在 XCode 控制台中禁用记录动态加载程序事件 dyld 的打印 我找到了解决方案here 但我找不到记录 Dyld API 使用情况 and 日志库加载XCode 11的产品方案诊断中的选项 请帮我找到它们 PS 如果Xcode11
  • getNamedItem() 与 getAttribute() 之间的区别?

    两者都给我一个 XML 元素的属性 他们之间有什么区别吗 添加 W3C 书签文档对象模型核心 作为一个来源 它已经是最好的了 getAttribute 是由Element界面 来自 W3C 获取属性按名称检索属性值 getNamedItem
  • 如何创建包含 xml 和 html 文件的 jar 文件?

    我正在尝试创建一个 jar 文件 其中包含一些所需的类和 java 文件 但我还想包含一些额外的 xml xsl html txt 自述文件 文件 我在 Windows XP 上使用 Eclipse 有没有一种简单的方法可以让我设置目录结构
  • 运行 npm install 时收到“npm ERR!code ELIFECYCLE npm ERR!errno 126”

    我试图在我的服务器上运行 npm install 并收到此错误 gt email protected postinstall home workspace AgreementCancellationProd retrymechanism n
  • 身份验证失败 - 999 - HTTP 状态代码未处理或不允许

    I using scrapy 我想得到忽略响应 URL 我只是在输出控制台中看到 调试 忽略响应 https www mywebsite com gt HTTP 状态代码未处理或不允许 根据文档here您可以添加应该由蜘蛛处理的 HTTP
  • 似乎无法通过 cURL 获取网页内容 - 用户代理和 HTTP 标头均已设置?

    由于某种原因 我似乎无法通过 cURL 获取此特定网页的内容 我已经设法使用 cURL 很好地访问 顶级页面 内容 但相同的自建快速 cURL 功能似乎不适用于链接的子网页之一 顶级页面 http www deindeal ch 子页面 h
  • C++ - stringstream <<“覆盖”

    我正在用 C 制作 OpenGL 游戏 与其他语言相比 我对 C 相当缺乏经验 不管怎样 我为一些图像创建了一个带有 base 目录的字符串流 然后我将此字符串流作为函数参数传递给构造函数 构造函数附加图像文件名 然后尝试加载结果路径 然而
  • 用 NodeJS 编写的简单 TCP 服务器中的 socket.emit?

    正如你将看到的 我不太了解 TCP 服务器和客户端的基本概念 可能 socket emit 甚至不可能 但我想知道最好的替代方案或类似的东西 Socket io 有一个漂亮的东西可以发出事件并在另一端捕获它们 它位于它的首页 http so
  • Azure Function:部署后旧代码仍在运行

    现在 我再次面临这样的问题 即使通过 KUDU 的 zip 部署返回成功后 旧代码仍在 Azure Function App 上使用 当然 我预计新代码会在大约 30 分钟后加载 而不是立即加载 问题被标记为关闭 在这种情况下 最佳实践是什
  • 二维叉积定义

    In 判断线段是否在多边形内部我注意到接受的答案有一个不寻常的二维叉积定义 u1 u2 x v1 v2 u1 v2 u2 v1 我从未遇到过像这样的二维叉积的定义 谁能告诉我这个定义的出处 不是数学专家 但交叉积ND被定义为操作N 1向量产
  • 零大小数组分配的作用/含义是什么?

    查看一些示例代码并遇到一些零大小数组分配 我创建了以下代码片段来澄清我的问题 这是有效的代码 class T int main void T ptr new T 0 return 0 它有什么用 ptr 有效吗 这个结构可移植吗 C 标准中
  • 限制 NSArray 中的重复条目

    我有一个数组 其中包含一些重复的条目 首先 有什么办法可以限制插入数据时的重复条目吗 其次 如果一个数组已经具有比其他方式重复的值 我们只能从该数组中检索唯一的值 我听说过 NSSet 但我不知道如何使用它 不要使用 NSSet 您只能在创
  • 卡夫卡流 RoundRobinPartitioner

    我编写了一个kafka流代码 使用kafka 2 4 kafka客户端版本和kafka 2 2服务器版本 我的主题和内部主题有 50 个分区 我的 kafka 流代码具有 selectKey DSL 操作 并且我有 200 万条使用相同 K
  • 如何检查一个 div 是否包含另一个 div?

    如果我的父 div 有一个仅使用 JavaScript 的子 div 我需要显示警报 而不使用 jQuery 我尝试过使用contains 函数来检查我的 div 并发送警报 但它不起作用 div class ro div