程序员经验分享-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 的相关文章

  • PhoneGap/Cordova：如何使用cookies（iOS）？

    我有一个适用于 iOS 的 PhoneGap Corodova 项目 在 iOS 模拟器上构建时 我使用了 Jquery Cookies 它们很好 但是 既然我的设备上有该应用程序用于测试 它们就不再工作了 我猜这只是 iOS 不支持的东西

  • javascript中输入类型时间的值

    我有这个html

  • 如何在每个组件完成加载后在 Angular 2 中运行 jquery 函数

    我已经尝试了所有生命周期挂钩 但无法实现所需的结果 我需要的结果是触发一个函数 该函数在加载每个元素 组件 后初始化用于单个页面上不同元素的许多 jquery 插件 假设你有这个结构 主页 滑块 小部件 产品旋转器 ETC 这些元素中的每一

  • jQuery 在 Chrome 下发现错误元素

    我使用 jQuery 迭代 HTML 表 并动态填充每行的行号 通过在文本框中填充行号 function updateRowNums myTable find tr each function index this find input i

  • 水平平滑滚动 100px

    Heyjo problem 一周以来我一直在寻找 javascript 或 jQuery 代码 以便在我的网站上实现滚动按钮 我失败的那一刻是按钮应该多次工作的时候 他的任务不是滚动到专用元素 而是应该向左滚动 例如 100px 此外 滚动

  • 如何设置在浏览器的新选项卡（_blank）中打开的pdf文件的标题

    这是我的尝试 是否在新选项卡上打开 但它总是显示test pdf如题 function titlepath path name alert path alert name document title name window open pa

  • 支持换行的 JQuery 工具提示

    我正在寻找一个轻量级的 jquery 插件 用于在用户将鼠标悬停在元素上时显示工具提示 我希望插件从标题属性中获取内容 而且我可以创建新行也很重要 任何帮助表示赞赏 在 jQuery 1 9 jquery jquery ui 和标准 too

  • jqGrid刷新本地数据（JSON对象）

    我正在尝试将 jqGrid 与本地数据一起使用 但发现了几个问题 我正在初始化这样的事情 function refreshGrid grid results grid jqGrid data results datatype local c

  • 禁用 Bootstrap 中的选项卡

    我正在尝试禁用引导程序中的选项卡 我一直在研究 但尚未找到解决方案 我已经尝试过这个 可以禁用 Bootstrap 中的选项卡吗 https stackoverflow com questions 9237314 can you disab

  • 无法正确显示行

    我应该在这个问题的开头说我完全没有 html css javascript 背景 所以请对我宽容点 如果我使用了错误的术语或者问了一个愚蠢的问题 没有提供足够的信息 请抱歉 我正在尝试让一个可扩展的表工作 通过阅读论坛线程 教程 将 nex

  • 为什么复制功能在 setTimeout 中不起作用？

    当我尝试时 Chrome 会抱怨copy inside setTimeout setTimeout function copy a 0 Uncaught ReferenceError copy is not defined at

  • CORS 在 jquery 中工作正常，但在 angularjs 中不行

    我的服务器端是php mysql 我正在另一个域的 Web 服务中进行 Ajax 调用 其中启用了 的访问控制 var postUrl http logical brains com elance clone test login php

  • jqGrid - 使所有列不可排序？

    除了添加之外 有没有办法使网格上的所有列都不可排序sortable false到每一列 我知道您可以在网格级别设置全局选项 但不知道是否可以在 colModel 级别执行此操作 您可以使用 colmodel 模板来实现此目的 cmTempl

  • Jquery获取选中的复选框

    您好 我想获取页面中选定复选框的列表 实际上我真正需要的是获取复选框旁边的元素的文本 该元素是一个 html 元素 li 代码如下 但它不起作用 这是我当前的 jQuery document ready function target cl

  • Jquery 悬停卡

    我在用着http designwithpc com Plugins Hovercard http designwithpc com Plugins Hovercard 但我不知道如何在悬停卡上声明 var 每个工作描述都有自己的 ID 当悬

  • 滚动时的 CSS 背景模糊

    我有固定的背景图像 滚动时我希望图像变得模糊 我知道如何在 css 中进行模糊 但在特定的滚动位置进行 这是一个例子 https medium com good music f160ba9e6c52 https medium com goo

  • 按下回车键时不刷新页面

    我遇到了一些问题 只要表单中有输入 回车键就会触发页面刷新 下面的代码 如果按下回车并且文本区域 input 中没有输入任何文本 则不会刷新页面 但是如果按下回车并且 input中有输入或者光标位于文本区域 我不确定是什么触发了它 因为 s

  • 如何通过单击链接来更改 div 的内容？

    这是我的网页的 修改后的 jsfiddle 它还有很多 而且定位是正确的 与此相反 http jsfiddle net ry0tec3p 1 http jsfiddle net ry0tec3p 1 a href class btn1 st

  • Flot 库将 y 轴设置为最小值 0 和最大值 24

    如何将 y 轴设置在 0 到 24 的范围内 这是我的代码 j plot j placeholder d1 xaxis mode time min new Date 2010 11 01 getTime max new Date 2011

  • 测量窗口偏移

    有没有一种方法可以测量 jQuery 中窗口的偏移量 以便我可以比较 固定 元素和相对定位元素的位置 我需要能够知道窗口滚动了多远 以便我可以使用该图来计算固定元素的高度 相对于视口顶部 和相对对象的高度 相对于顶部 之间的差异文件的内容

随机推荐

  • 如何使用 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

热门标签