除非data-*自定义数据属性的值是固定不变的,否则最好不要把data-*作为查询条件。

例子:

<div data-index="0">hello</div>

var div= document.querySelector("div[data-index=\"0\"]");

console.log(div);//正常

div.dataset.index=1;//更新属性值

var newDiv= document.querySelector("div[data-index=\"1\"]");//使用更新后的属性值来查询元素

console.log(newDiv);//查询不正常,找不到data-index为1的元素,因为自定义数据的值被修改后不会同步到页面标签属性中,此时data-index属性值仍是0,更新的不过是dataset中的值

data-* 自定义数据属性 遇到的坑的更多相关文章

  1. jquery 操作HTML data全局属性缓存的坑

    data-* 全局属性 是一类被称为自定义数据属性的属性,它赋予我们在所有 HTML 元素上嵌入自定义数据属性的能力,并可以通过脚本(一般指JavaScript) 与 HTML 之间进行专有数据的交换 ...

  2. html5 自定义数据属性 ,也就是 data-* 自定义属性---笔记。

    html5  自定义数据属性 ,也就是 data-* 自定义属性.  例如 <div data-last-value="43" data-hidden="true& ...

  3. 如何使用HTML5自定义数据属性

    在本文中,我将向你介绍如何使用HTML5自定义数据属性.我还将向你介绍一些开发人员在工作中经常使用的优秀实例. 为什么需要自定义数据属性? 很多时候我们需要存储一些与不同DOM元素相关联的信息.这些信 ...

  4. spring data 自定义查询

    spring data 自定义查询 https://www.cnblogs.com/airycode/p/6535635.html 在方法接口上面使用@Query

  5. 最近项目中使用Spring data jpa 踩过的坑

    最近在做一个有关OA项目中使用spring data JPA 操作数据库,结果遇到了补个不可思议的麻烦.困惑了好久. 首先看一下问题吧,这就是当时测试“设置角色时,需要首先删除该用户已经拥有的角色时” ...

  6. spring data 自定义接口

    1 spring data jpa 虽然说spring data 提供了很多DAO 接口,但是依然可能不能满足我们日常的使用,所以,有时我们需要自定义接口方法.自定义接口方法步骤如下: 1.  创建自 ...

  7. Andorid自定义attr的各种坑

    本文来自网易云社区 作者:孙有军 在开发Andorid应用程序中,经常会自定义View来实现各种各样炫酷的效果,在实现这吊炸天效果的同时,我们往往会定义很多attr属性,这样就可以在XML中配置我们想 ...

  8. C++ sort使用自定义函数的一些坑

    先看代码: 解释:使用自定义比较函数时,如果用了返回值恒为$true$或者恒为$false$的比较函数,就会这样子. 原因: https://stackoverflow.com/questions/4 ...

  9. django 自定义过滤器中的坑.

    今天在创建自定义过滤器的时候,设置已正常.但是在运行后报: 'filter' is not a valid tag library: Template library filter not found ...

随机推荐

  1. vue移动端更改手机物理按键返回问题

    又是一天见面的日子,春季盎然~ 已经无法在继续抒情下去了,写作水平骤降!! 今天记录下应用cordva+vue生成的apk 在手机物理返回时遇到的问题: 前提说~~应用vue,我们可以自定义上一路径和 ...

  2. cmake 简学

    https://www.cnblogs.com/cv-pr/p/6206921.html

  3. CSAPP阅读笔记-存储器层次结构-第六章-P400-P462

    6.1 存储技术 1.随机访问存储器(RAM),是易失性存储器,掉电存储信息会丢失,与之相对的是非易失性存储器(ROM),它掉电后存储信息不丢失,但前者访问速度较快,但容量有限,通常只有几百或几千兆字 ...

  4. (转)MyISAM Key Cache详解及优化

    原文:http://huanghualiang.blog.51cto.com/6782683/1372721 一.MyISAM Key Cache详解: 为了最小化磁盘I/O,MyISAM将最频繁访问 ...

  5. Centos 7网卡设置

    #yum install net-tools.x86_64 #cd /etc/sysconfig/network-scripts/ #mv ifcfg-eno16780032 ifcfg-eth0 手 ...

  6. 2019第九届MathorCup数学建模

    题目下载:https://www.lanzous.com/i3taz2j 总共四个问题 问题1 首先附件一中的数据,拿到后肯定感觉棘手.我们的处理方法: 在下面缺失数据的地方我们都认为是问题3中的预测 ...

  7. 查看修复HDFS中丢失的块

    检测缺失块 hdfs fsck -list-corruptfileblocks hdfs fsck / | egrep -v '^\.+$' | grep -v eplica 查看上面某一个文件的情况 ...

  8. Hibernate各种查询操作(一)

    测试数据库如下 t_sort表:                                   t_good表: 一.对象导航方式查询 查询所有食品类下面的食品 代码: //对象导航查询 @Te ...

  9. (Forward)5 Public Speaking Tips That'll Prepare You for Any Interview

    Landing a job interview is incredibly exciting –- and often terrifying. But fear not. There are clev ...

  10. (微信小程序)二 : 创建一个页面

    首先先看一下pages的目录结构吧. 我创建了一个topics页面.3个文件全创建好了之后 我往topics.js添加数据 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 ...