计算div内的div

2024-04-24

我已经尝试过此页面上的解决方案来计算父(类)div 内的div。但不幸的是我的结果总是显示现有子 div 的总数。 因为示例中的两个 span 标签都将输出 7。

为了更好地理解,这是代码 html:缺少什么? -(我绝对是新手)。 谢谢。

    <!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>count</title>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
        <div id="content-body" class="clearfix">

        <!-- detail div no 1 = 3 items inside -->
            <span class="countDiv"></span> 
            <div class="detail">
                <div class="box">
                    Div item 1
                </div>
                <div class="box">
                    Div item 2
                </div>
                <div class="box">
                    Div item 3
                </div>
            </div>
            <br /><br />
            <!-- detail div no 1 = 4 items inside -->
            <span class="countDiv"></span> 
            <div class="detail">
                <div class="box">
                    Div item 1
                </div>
                <div class="box">
                    Div item 2
                </div>
                <div class="box">
                    Div item 3
                </div>
                <div class="box">
                    Div item 4
                </div>
            </div>

        </div>
    <script type="text/javascript">

        $('#content-body').each(function() { 
            var n = $('.detail').children('.box').length;
            $(".countDiv").text("There are " + n + " divs inside parent box detail.");
        });

    </script>
    </body>
</html>

检查这个小提琴:http://jsfiddle.net/geko/vXcgZ/ http://jsfiddle.net/geko/vXcgZ/

问题在于你的每一个,以及

$('.detail').children('.box').length

这将选择容器中的所有 .detail 元素以及带有 .box 的所有子元素。总共有 7 个。 您应该使用each() 遍历.detail 并对.box 子项进行计数并修改核心相应的countDiv。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

计算div内的div 的相关文章

  • 输入类型=“时间”超过24小时

    我刚刚遇到以下问题 在网络应用程序用户界面中 我希望用户输入响应消息的时间范围 以小时为单位 时间范围应最长为 72 小时 我们很乐意使用
  • 具有固定位置的平滑滚动标题

    当我将位置更改为固定时如何创建平滑滚动 我尝试添加动画但不起作用 最好使用jquery动画 window scroll function var sticky mobile menu scroll window scrollTop if s
  • iPad 2 的 HTML5 源元素错误是否已修复?

    根据这个页面 http camendesign com code video for everybody webm http camendesign com code video for everybody webm 第一个 iPad 有一
  • 如何使用 HTML5 Javascript Canvas 获取三个碰撞形状的交集并删除不碰撞的部分?

    我最近专门针对 KonvaJs 发布了类似的问题here https stackoverflow com questions 64603077 how can i get the intersection of three shapes c
  • 在 Selenium WebDriver 上如何从 Span 标签获取文本

    在 Selenium Webdriver 上 如何从 span 标记检索文本并打印 我需要提取文本UPS Overnight Free HTML代码如下 div id customSelect 3 class select wrapper
  • 两个 div 之间的匿名空白

    这里是Fiddle http jsfiddle net y6hSV 1 我有两个divs一个用于标题 另一个用于主体 在 的里面div这是标题 我还有另一个div那个 div 是floated left 因为那个floating 两者之间出
  • 计算 Int32 中的前导零

    如何计算一个数组中的前导零Int32 所以我想做的是写一个函数 如果我的输入是 2 它返回 30 因为在二进制中我有000 0000000000010 NOTE使用 dotnet core gt 3 0 看here https stacko
  • 尝试使用 Excel 中的 VBA 从网页中提取一个值

    我几天来一直在尝试查找信息 但是我找到的所有示例都只有一小段代码 我需要全部 我想要做的是从主页中提取一个值并将其放入 Excel 的单元格中 然后从同一站点上的另一个页面获取另一个值并放入下一个单元格等 该页面是瑞典证券交易所页面 我用作
  • 将实时流音频从 NodeJS 服务器获取到客户端

    我需要从 1 个客户端到服务器到多个侦听器客户端的实时实时音频流 目前 我正在从客户端进行录音 并通过 socket io 将音频流式传输到服务器 服务器接收此数据 并且必须将音频流式传输 也通过 socket io 到想要收听此流的客户端
  • 如何在浏览器上使用样式组件 CDN 构建?

    索引 html 我从以下位置获取 CDN 文件 我怎样才能访问styled功能 const styled window styled components不起作用 对于版本 5 如docs https styled components c
  • 如何在 Windows 网络中的 Intranet Web 应用程序中获取用户的用户名

    我内部有一个简单的 HTML 页面 它只显示一个表单并要求用户填写 我想自动捕获Windows域用户名和机器名 并将其与表单中收集的数据一起提交 我可以在客户端这样做吗 HTML JavaScript 或者我被迫在服务器端执行此操作 我还不
  • 使用 VSCode 的 EJS 文件缩进错误

    我在 VSCode 上遇到 EJS 文件问题 每次保存文件时 格式化程序都会应用错误的缩进 在每个 EJS 标识符下方 下一行向右移动 缺少正确的垂直对齐 我使用 ejs 的 HTML 格式并安装了 DigitalBrainstem 的 E
  • 为什么内部 DIV 会溢出到外部 DIV 之外?

    我已经远离 HTML 和 CSS 很久了 找不到这个简单问题的解决方案 我有一个 div 位于另一个 div 中 外层黑色 内层橙色 我的 HTML 和 CSS 是 outer position fixed width 30 height
  • 如何使用 HTML 和 CSS 在我的网站上显示社交图标?

    我拼命尝试向我的网站添加一些图标 但无法让它们正确显示 我想要的只是一个包含图像并在线显示它们的容器 然后我想在该容器和图像之间添加一些填充 仅此而已 看这里我的方法 如果有人可以帮助我并纠正我的代码 使其真正有效 我会非常高兴 在我的 H
  • MySQL 中非空值的计数和分组

    我需要计算按特定 ID 分组的非空 我的意思是至少包含 1 个字符的字符串 行 例如 我的数据可能如下所示 form id mapping 1 value 1 1 1 value 2 2 2 NULL 3 value 3 我想计算每个表单的
  • CSS 过滤器在 Firefox 中不起作用

    我正在尝试 CSS 过滤器 但它在我的 Firefox 15 0 浏览器中不起作用 HTML div class google img src https www google com images srpr logo3w png div
  • CSS以两种颜色显示一个字符[重复]

    这个问题在这里已经有答案了 css中是否可以用两种颜色制作单个字符 我的意思是例如字符 B 上半部分为红色 下半部分为蓝色 h1 font size 72px background webkit linear gradient red 49
  • 将默认搜索文本添加到搜索框 html

    我正在努力将 搜索 文本添加到搜索框 我正在努力实现 onfocus 消失文本 And onblur 重新出现文本 到目前为止 我已经实现了这一点 但我必须将其硬编码为 html eg
  • 如何在 CSS 中将容器内的多个 div 居中

    我正在测试像 Windows Metro 风格的中心分隔线 container height 300px width 70 background EEE margin 10px auto position relative block ba
  • HTML5 地理定位 - 在 iOS 上无法始终工作

    目前正在使用 HTML5 地理定位 我已经在所有网络浏览器上测试了它 它似乎工作正常 然而 当我在 iPad 上测试地理定位时 它在 iPad mini 上始终有效 但当我将其放在更大的 iPad iPad 2 上时 位置似乎并不总是有效

随机推荐

  • 如何在 CKEditor 中更改已注册的对话框

    我正在尝试编写一个插件 向图像对话框添加一个附加选项卡 页面 我不想更改对话框的源本身 而是使用插件来增强它 我搜索文档和论坛已经有一段时间了 现在我知道我可以在对话框对象上调用 addPage 来添加另一个选项卡 我也了解内容对象必须是什
  • 识别 Pandas 数据框中组中重复项的更好方法? [复制]

    这个问题在这里已经有答案了 我有一个数据框 x c 0 0 1 1 3 2 2 1 1 3 2 1 4 3 1 5 4 1 6 1 0 7 3 1 8 2 1 9 1 2 我想生产 c x duplicated 0 1 0 False 1
  • 如何交错或创建两个字符串的唯一排列(无需递归)

    问题是打印两个给定字符串的所有可能的交错 所以我用 Python 编写了一个工作代码 其运行如下 def inter arr1 arr2 p1 p2 arr thisarr copy arr if p1 len arr1 and p2 le
  • 如何动态更改母版页

    我想为一个纯aspx文件动态分配一个母版页 任何人都可以告诉我 如何做到这一点 您可以覆盖 default aspx cs 中的 OnPreInit 并根据查询字符串中的某些值设置母版页 像这样的事情 protected override
  • 什么是低位和高位?

    谁能告诉我什么是低位和高位 如何识别高位和低位 下面是二进制形式 如何0110里面有更高位吗 0110 0111 1100 1010 1100 0111 1001 1011 就像十进制一样 二进制中较高位通常写在左侧 所以如果你看到0111
  • pandas.concat 和 numpy.append 大数据集的内存错误

    我面临一个问题 我必须在循环中生成大型 DataFrame 每次两个 2000 x 800 pandas DataFrame 时进行 50 次迭代计算 我想将结果保存在内存中更大的 DataFrame 中 或者保存在类似字典的结构中 使用
  • 查找 Java Enum 的最佳实践

    我们有一个 REST API 客户端可以提供代表服务器上 Java 枚举中定义的值的参数 所以我们可以提供一个描述性错误 我们添加这个lookup每个枚举的方法 看起来我们只是在复制代码 不好 有更好的做法吗 public enum MyE
  • AWS - t2.micro 实例 EBS 卷大小

    我试图通过 AWS 控制台创建 t2 micro 实例 我希望它免费一年 但它不附带任何实例存储 所以我想在这个实例中添加 EBS 卷 免费吗 我可以在 t2 micro 中免费添加的最大 EBS 卷是多少 Model vCPU CPU C
  • 我应该使用全局变量在整个服务器上共享 socket.io 实例吗

    以下是我的 node js 应用程序中的 server js 文件 我希望我的 socket io 实例能够被服务器上的其他文件访问 以便从我的 API 发出事件 listingRoutesApi userRoutesApi etc ref
  • 包含“类型”成员的联合

    关于工会 我有一个关于我仍然不明白的问题 我读过它们的很多用途 并且大部分都可以看到它们如何有用并理解它们 我已经看到它们可以提供原始的 C 风格 多态性 我在几个网站上看到的例子是 SDL 的事件联盟 typedef union Uint
  • ui-router:没有视图模板的路由

    是否可以设置路线ui router只有一个控制器 目的是在某个 URL 处 我唯一想做的是以编程方式执行操作 而不是在视图中显示任何内容 我已经阅读了文档 但我不确定他们是否提供了一种方法来做到这一点 是的 我读过这个 https gith
  • 在设置为日本区域设置和语言的 Windows 10 上使用 Java 9 时,未正确打印 IOException 消息

    在此特定块中抛出异常 try transport m readListener onReadTransport transport catch IOException e gt onIOException e transport onIOE
  • IE11 和 Edge 中出现带有 border-radius 的幽灵“边框”

    在 IE11 和 Edge Windows 10 上 中 以下 HTML CSS 在不应该出现的地方显示奇怪的透明边框
  • Matlab:通过扩展向量来扩展矩阵

    我有一个dxmxn matrix A 解释 对于每个n 有m维度向量d 我想将每个 d 维向量扩展如下 考虑一个向量v维度 d 1 2 d 它是 x 1 x 2 x d 但为了简单起见 我删除了 x 目标是延长v获得一个d d向量形式 1
  • lambda 表达式的序列化有哪些安全风险?

    只是回顾一下 Streams 和 Java 8 Lambda 功能 以及对其他不言自明的 Oracle 文档的最后评论拉姆达表达式 http docs oracle com javase tutorial java javaOO lambd
  • 为什么不能在不创建节点作为指针的情况下创建链表?

    里面有一个答案创建链表而不将节点声明为指针 https stackoverflow com questions 40331173 creating a linked list without declaring node as a poin
  • 将 bootstrap 添加到 symfony 应用程序的正确方法是什么?

    我正在使用 symfony 框架 3 来开发 Web 应用程序 我需要将 boostrap 的功能添加到我的应用程序中 我使用以下命令安装了引导程序 我正在使用作曲家 composer require twbs bootstrap 它将 b
  • 使用 Django Rest Framework 上传文件

    我是 Django 新手 任何人都可以帮助我 我如何使用 Rest Framework API 上传文件 我尝试过关注此页面 http www django rest framework org api guide parsers file
  • 如何通过 PHP App Engine 应用程序在 Google Compute Engine 实例上创建 cron 作业?

    由于我们的 App Engine 应用程序的架构 我们无法使用 Google 提供的 App Engine cron 服务 并且正在寻找替代选项 我们提出的一种可能的解决方案是允许我们的 App Engine PHP 应用程序在计算引擎实例
  • 计算div内的div

    我已经尝试过此页面上的解决方案来计算父 类 div 内的div 但不幸的是我的结果总是显示现有子 div 的总数 因为示例中的两个 span 标签都将输出 7 为了更好地理解 这是代码 html 缺少什么 我绝对是新手 谢谢