程序员经验分享-hwhale

使用 jQuery 选择具有数据属性的元素为其父元素分配一个 null ID

2024-05-19

这确实很奇怪。如果我使用 jQuery.find()在滚动事件期间查找具有数据属性的子元素，然后滚动页面将重复添加和删除 IDparents这些元素。

这很难描述，但这里有一个可重现的测试用例：http://jsfiddle.net/8fouvx9p/ http://jsfiddle.net/8fouvx9p/

var groups = $(".group");

$(window).bind("scroll resize orientationchange", function() {
  showGroup();   
});
               
function showGroup() {
  $(groups).each(function() {
    var group = $(this),
        elements = $(group).find("[data-animation]");
  });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="group">
    <div data-animation="test" class="test">Test</div>
    <p data-animation="test" class="test">Test</p>
    <span data-animation="test" class="test">Test</span>
</div>
<div class="group">
    <div data-animation="test" class="test">Test</div>
    <p data-animation="test" class="test">Test</p>
    <span data-animation="test" class="test">Test</span>
</div>
<div class="group">
    <div data-animation="test" class="test">Test</div>
    <p data-animation="test" class="test">Test</p>
    <span data-animation="test" class="test">Test</span>
</div>
<div class="group">
    <div data-animation="test" class="test">Test</div>
    <p data-animation="test" class="test">Test</p>
    <span data-animation="test" class="test">Test</span>
</div>
<div class="group">
    <div data-animation="test" class="test">Test</div>
    <p data-animation="test" class="test">Test</p>
    <span data-animation="test" class="test">Test</span>
</div>
<div class="group">
    <div data-animation="test" class="test">Test</div>
    <p data-animation="test" class="test">Test</p>
    <span data-animation="test" class="test">Test</span>
</div>
<div class="group">
    <div data-animation="test" class="test">Test</div>
    <p data-animation="test" class="test">Test</p>
    <span data-animation="test" class="test">Test</span>
</div>
<div class="group">
    <div data-animation="test" class="test">Test</div>
    <p data-animation="test" class="test">Test</p>
    <span data-animation="test" class="test">Test</span>
</div>
<div class="group">
    <div data-animation="test" class="test">Test</div>
    <p data-animation="test" class="test">Test</p>
    <span data-animation="test" class="test">Test</span>
</div>

确保预览足够小，以便有滚动空间，然后检查“测试”元素之一并上下滚动。您会看到在 Firefox 中，它添加和删除了 IDnull滚动到测试元素：

在 Safari 中，这种情况的发生不太一致 – 但当这种情况发生时，ID 将以sizzle.

如果我改变.find("[data-animation]") to .find(".test")，它不会发生。

鉴于sizzle有时会出现在 Safari 中的 ID，我猜这是由于 Sizzle（jQuery 的选择器引擎）本身的错误，而不是我在自己的代码中做错了什么？


这些空标识符的创建似乎只发生在 Firefox 上。但我检查过的所有浏览器似乎都发生了类似的情况，只是不太明显。使用 Chrome 和 Opera，您可以看到父级上的活动更改div，没有任何最终效果。在 IE 中，情况非常微妙，DOM 树中没有任何东西真正引人注目，但样式窗口中仍然有轻微的闪烁。表明它也在响应同一件事。

当我仔细研究了一下 jQuery 文档中关于可以传递给.find()方法似乎掌握了最好的线索：

包含用于匹配元素的选择器表达式的字符串。

用于匹配元素的元素或 jQuery 对象。

https://api.jquery.com/find/ https://api.jquery.com/find/

我将此解释为您不能直接传递数据属性，而是必须过滤包含该属性的元素本身。那么修复就会非常简单。罪魁祸首：

.find("[data-animation]");

将其包装在 jQuery 对象中可以使该功能正常工作：

.find($("[data-animation]"));

这实际上解决了问题，但假设是错误的。使用数据属性应该符合选择器表达式的条件。如果另一个答案可以提供此查询对父级的影响的完整解释，OP 应该随意接受另一个答案。到目前为止我只注意到以下几点：

  • 这不仅仅是一个问题data但与所有属性一起发生
  • 与使用类相关，具有 id 的元素不会受到影响
  • 与使用没有任何关系.each()至少循环
  • 可能是最奇怪的......使用时没有这样的问题.children() instead

最后一个非常令人困惑，因为两种方法非常相似。但搜索文档我确实发现了差异，只是.find() has a 选择器上下文 https://api.jquery.com/jquery/#selector-context这看起来就是问题的根源。

这是一个奇怪的例子，其中 null id 出现在body如果上下文设置为：

Demo http://codepen.io/anon/pen/bVRYYw?editors=001

当省略第二个参数时它会完全消失......

原始代码的工作示例，包括其他一些细微的调整：

Pen http://codepen.io/anon/pen/LpLLXo?editors=001

var groups = $('.group');

$(window).on('scroll resize orientationchange', showGroup);

function showGroup() {

  groups.each(function() {

    var group = $(this),
    elements = group.find($('[data-animation]'));
  });
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

jQuery

firefox

scroll

customdataattribute

sizzle

使用 jQuery 选择具有数据属性的元素为其父元素分配一个 null ID 的相关文章

  • jQuery 日期选择器 - 时区问题

    我们在网站上使用 jQuery 日期选择器来选择预订的日期和时间 日历当前设置为太平洋标准时间 当用户尝试从其他时区访问时 这会导致错误 我们是否应该将服务器设置为 UTC 并让应用程序根据用户的 IP 地址自动选择用户的时区 我很好奇我们

  • 标点符号加载“动画”，javascript？

    我正在寻找一种好方法来显示一些标点符号加载 动画 我想要的是这样的 This will display at second 1 Waiting for your input This will display at second 2 Wai

  • Javascript：如何根据 html 标签扩展用户选择？

    乐代码 http jsfiddle net frf7w 12 http jsfiddle net frf7w 12 所以现在 当前的方法将完全按照 选择的方式获取所选文本 并添加标签 以便在显示时页面不会爆炸 但我想做的是 就是说 当用户选

  • JavaScript：参数列表后缺少 )

    这个 JavaScript 产生一个错误 参数列表后缺少 在 firebug 中使用代码 我究竟做错了什么 功能d缺少左括号 answer after 不应该逃避 只需常规报价即可

  • jquery：如何检查div中的所有单选按钮是否被选中

    我的 html 看起来像这样 div div

  • 动态检测屏幕高度和屏幕宽度，以精简图像的高度和宽度

    我以前可以display a div标签仅在portrait使用下面提到的代码corrl https stackoverflow com users 15388872 corrl in this https stackoverflow co

  • 设置股票数据 Highcharts xAxis 的格式

    我已经浏览了需要为 xAxis 属性设置的 Highcharts 选项来格式化时间标签 但没有运气了解这对于这种情况到底是如何工作的 我在白天 盘中 检索了股票的动态数据 我需要显示这些数据 因为检索的数据每天从 9 30 开始到 17 0

  • 您网站上的自定义 jQuery 脚本有多少行代码？多少才算是太多呢？

    对于我们的网站 我使用了大量 jQuery 现在我正在查看基础库顶部的 340 行 jQuery 代码 多少是太多了 我将添加更多内容 我什么时候开始尝试压缩代码并最终转向 OOP 行数并不意味着什么 重要的是你实际上在做什么 您可能拥有

  • 附加元素在 IE11 中不起作用

    在构造函数中我创建一个元素 var this legendElement this compileLegend 后来我想在事件监听器中使用它 var takeControl function this element empty this

  • Jquery获取每个div的子子div并将信息抓取到数组中

    我有一些看起来像这样的 html div div class sub main div div

  • Skrollr 添加空白

    我已经尝试了一切 我在谷歌上阅读了 4 5 页试图找到适合我的修复程序 已经筋疲力尽了 即使我使用 skrollr 示例 我的问题仍然存在 不是说他们做错了什么 我知道我只是没有正确理解它 因此 我上传了一个演示 仅在移动设备上展示这个尴尬

  • WebView 在某些设备上如果不长按则不会滚动

    我有一个 WebView 设置如下 the web view mWebView WebView findViewById R id webView push the url on to the web view mWebView loadU

  • 缩小 DIV 和所有子元素

    我想在我的设计中重新调整部分 HTML 的大小 我需要以动画的形式进行此更改 DIV 本身及其所有内部元素 即图像 段落 锚点等 应该重新调整大小 就像调整具有恒定纵横比的图像大小一样 我认为 该工具应该获取元素的当前高度和宽度并增加 减少

  • JQuery：替换div内的字符串

    div p NUMBER times p p Place N NUMBER p div 如何替换内容 div 内的所有 NUMBER 我试过replace方法但没有成功 Thanks 您可以使用标准的 Javascript 字符串替换函数

  • jQuery 多部分表单验证

    当我解决这个问题时 这可能会变成多个问题 但我需要一些认真的 jQuery 帮助 我已经根据示例创建了一个多部分表单bassistance de http jquery bassistance de validate demo multip

  • 为什么这个跨域ajax调用实际上有效？

    我无意中写了一个跨域AJAX调用NextBus http www nextbus com xmlFeedDocs NextBusXMLFeed pdf 使用 jQuery ajax url http webservices nextbus

  • 在 ajax 请求上启用 jQuery contextMenu 项

    我正在尝试更新上下文菜单 http medialize github com jQuery contextMenu docs htmlitem 如果 ajax 请求改变了我的 div 内容 这就是我的意思 我有一个这样的 div div c

  • 验证动态字段jquery

    下午好 我遇到了以下问题 我正在使用 jQuery 验证插件来验证我的表单 v1 13 0 客户端 工作得很好 但我无法解决的问题是 我有一个字段名称 product 它是一个数组 在这个阵列中我可能有一种或可能有 20 种产品 这是我的代

  • jQuery DataTables：隐藏最后一行的“删除”按钮

    我有一个DataTable在某些情况下可以返回多个页面 返回的每一行都显示一个删除按钮 但我需要它在返回的最后一行上隐藏此按钮 无论是 1 pg 还是多个 因此不能在其中使用 CSS 我想学习如何实现这一点 因为DataTables对我来说

  • jQuery UI 对话框 - 关闭后无法打开

    我有一个问题jquery ui dialog box https jqueryui com dialog 问题是 当我关闭对话框然后单击触发它的链接时 除非刷新页面 否则它不会再次弹出 如何在不刷新实际页面的情况下回调对话框 下面是我的代码

随机推荐

  • 如何使用 ASP.NET Razor 语法应用 bootstrap v4 alpha 的表单输入验证类？

    因此 Bootstrap v4 alpha 对表单验证类进行了一些更改 现在 要将验证样式应用于表单输入 请将 CSS 类应用于父级div form group 我正在使用 ASP NET MVC4 编写一个网站 并试图弄清楚如何将此 CS

  • Firebase Analytics 禁用受众国家/地区跟踪

    我正在开发一个严格不允许位置跟踪的应用程序 我想使用 Firebase Analytic 的其他功能 例如 PageTransitions 和 Crashalitics 但如果我无法禁用受众位置跟踪 我就无法使用其中任何功能 这是我在 An

  • 如何将一个字节转换为位？

    我有一个字节数组 我想访问每个字节并想要其等效的二进制值 8 位 以便对其执行下一步操作 我听说过 BitSet 但是还有其他方法可以解决这个问题吗 谢谢 如果您只需要它的二进制字符串表示形式 您可以简单地使用Integer toStrin

  • Git - 如何将整个目录恢复到特定提交（删除任何添加的文件）

    我想恢复 git 中的目录 恢复其中的所有文件 并删除自该提交以来添加的所有文件 进行结账似乎只能满足我的第一个要求 但不会删除任何文件 我想出了最简单的解决方案 git rm path to dir git checkout

  • 如何从 JavaScript 中的字符串中删除空白字符？

    如何从 JavaScript 中的字符串中删除空白字符 修剪很容易 但我不知道如何将它们从inside字符串 例如 222 334 gt 222334 您可以使用正则表达式 如下所示来替换所有空格 var oldString 222 334

  • 如何将安卓手机从睡眠状态唤醒？

    如何以编程方式将 Android 手机从睡眠状态唤醒 挂起至内存 我不想获取任何唤醒锁 这意味着手机在禁用 CPU 的情况下进入 真正的 睡眠状态 我想我可以使用某种RTC 实时时钟 机制 有人有例子吗 Thanks 为了让Activity

  • 为什么将函数参数声明为最终的？

    我目前正在阅读 Sams 出版的 24 小时自学 Android 应用程序开发 一书 我对 Java Android 或其他方面还比较陌生 我对 ActionScript 3 有非常扎实的背景 它与 Java 有足够的相似之处 因此该语言本

  • Seaborn 将 xticks 从 float 更改为 int

    我正在绘制一个图表 其中seaborn为sns pylab为plt plt figure figsize 10 10 sns barplot y whatever y x whatever x data mydata plt xticks

  • 管道：多个流消费者

    我编写了一个程序来计算语料库中 NGram 的频率 我已经有一个函数 它消耗一串令牌并生成一个订单的 NGram ngram Monad m gt Int gt Conduit t m t trigrams ngram 3 countFre

  • java ee - 使用 servlet 对用户进行身份验证

    我刚刚开始学习java 还没有接触过java ee 我需要使用 servlet 来验证用户身份 请提供示例代码和技术文献 谢谢你 创建一个接受用户名 密码的 html 表单 将这些数据发布到 servlet 在 doPost 中读取这些数据

  • 我希望 jQuery 验证器向表单元素的父级添加一个类

    我该如何使用jQuery 验证器 http docs jquery com Plugins Validation添加 删除类名 例如validate 在表单元素的父元素上 li 这样我就可以通过仅设置一个类名来设置与该元素相关的所有内容的样

  • 从 search.push 函数中的 DataTables 获取“数据排序”正交值

    我正在循环其中的行 fn dataTable ext search push函数根据许多条件选择一些行 我正在设置一些值TD的表称为正交 https datatables net manual data orthogonal data数据

  • 为什么 Slack 会导致 Windows 10 BSOD？

    每次我从睡眠状态恢复笔记本电脑时 我都会遇到 BSOD 我已经使用分析了小型转储WinDbg并且引起的过程总是Slack exe 我用谷歌搜索了一下我发现了https www tenforums com bsod crashes debug

  • 使用 Java 进行树可视化 [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我正在寻找一个库来生成图形或树 例如组织图表 该库应该能够从该图中生成纯图像 有谁知道一个好的 希望开源

  • 检查字符串是否是哈希值

    我正在使用 SHA 512 来散列我的密码 当然还有盐 我认为我想要的不可能 但无论如何我们还是要问一下 有没有办法检查字符串是否已经是 SHA 512 或其他算法 哈希值 当用户登录时 我想检查他的密码 如果它仍然是纯文本 则应将其转换为

  • Jquery UI 可调整大小的问题超出了遏制范围（也使用了可拖动）

    我面临的问题是 div 的可调整大小 当我将它与 Draggable 一起使用时 它会出现问题并且无法调整其宽度方向的大小 如果我单独使用可调整大小 那就没问题了 但我需要让它与可拖动功能一起使用 请建议 单击演示的 jsFiddle 链接

  • 在 Google 表格脚本中设置活动单元格的值

    我想创建一个公式 在某个单元格更改上创建时间戳 下面的代码就可以了 我现在想做的是将公式转换为纯文本 将该时间戳锚定到工作表上 如果您手动执行此操作 您将选择时间戳 复制它们并将它们粘贴为值 我不想手动执行此操作 因此我创建了下面的脚本 它

  • 使用 XProc 进行 XML 流处理

    我正在玩xproc http www w3 org TR xproc XML 管道语言和http xmlcalabash com http xmlcalabash com 我想找到一个流式传输大型 xml 文档的示例 例如 给定以下内容hu

  • Cakedc.users => 总是重定向到主页

    我在新的 Cakephp 安装上使用插件 CakeDC Users 我有两个控制器 PagesController php CardsController php Pages 有 1 个操作 Beta 它是主页 Cards 有两个操作 索引

  • 使用 jQuery 选择具有数据属性的元素为其父元素分配一个 null ID

    这确实很奇怪 如果我使用 jQuery find 在滚动事件期间查找具有数据属性的子元素 然后滚动页面将重复添加和删除 IDparents这些元素 这很难描述 但这里有一个可重现的测试用例 http jsfiddle net 8fouvx9

热门标签