我想使用jquery从动态创建的span元素中获取data-id和data-test的值

jQuery是一个流行的JavaScript库，用于简化HTML文档遍历、事件处理、动画效果和Ajax交互等操作。如果你想使用jQuery从动态创建的span元素中获取data-id和data-test的值，可以按照以下步骤进行操作：

首先，确保你已经引入了jQuery库。你可以在HTML文档的<head>标签中添加以下代码来引入jQuery库：

<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>

在你的JavaScript代码中，使用jQuery的选择器来选取动态创建的span元素。假设你的span元素具有一个特定的类名，可以使用类选择器来选取该元素。例如，如果你的span元素的类名为"dynamic-span"，可以使用以下代码选取该元素：

var dynamicSpan = $(".dynamic-span");

一旦选取了span元素，你可以使用jQuery的data()方法来获取data-id和data-test的值。data()方法可以获取元素上以"data-"开头的自定义属性的值。例如，如果你想获取data-id的值，可以使用以下代码：

var dataId = dynamicSpan.data("id");

同样地，你可以使用data()方法来获取data-test的值。例如，如果你想获取data-test的值，可以使用以下代码：

var dataTest = dynamicSpan.data("test");

至此，你已经成功从动态创建的span元素中获取了data-id和data-test的值。请注意，以上代码仅适用于使用jQuery库的情况。如果你不想使用jQuery，可以使用原生JavaScript的方法来实现相同的功能。

关于腾讯云相关产品和产品介绍链接地址，由于要求不能提及具体的云计算品牌商，我无法给出腾讯云相关产品的链接地址。但你可以通过访问腾讯云官方网站，查找与云计算相关的产品和服务。

相关·内容

如何使用 HTML、CSS 和 Vanilla JavaScript 以及本地存储创建待办事项应用程序

在本教程中，我们将介绍如何使用 HTML、CSS 和 JavaScript 创建功能齐全的待办事项应用程序。...每个任务将包含以下元素：用于将任务标记为完成的单选按钮用于显示任务的 span 元素一个编辑按钮和一个删除按钮使用 CSS 设计样式我们将从主体样式开始，以确保所有元素水平居中： body {...liElement然后我们从 DOM 中删除。最后，我们获取 li 元素的 data 属性值并将其存储在名为的变量中taskId。...在这个函数中，我们想要执行与删除按钮相同的步骤：即：获取所有编辑按钮使用forEach()方法迭代并获取最接近的li元素获取 data-id 属性 allTasks使用 id 在数组中查找任务...将删除线 CSS 类添加到当前 li 元素的范围使用该findIndex()方法从数组中获取当前任务的索引allTasks，然后将按钮的状态更新为选中。

1271 0

树形图拖拽插件tree-drag | 开源项目推荐

前言好多天前，领导让我实现一个树形图拖拽插件，这个插件用来描述各部门领导与员工之间的关系，每个父节点显示其子结点数量，拖拽任意一个叶结点上的人到另一个结点，他们之间的关系发生改变，树形图重新渲染。...用户操作都完成后，点击保存根据树形图生成JSON，将JSON发送给后端，后端根据JSON修改数据库中的人员对应关系。接下来就跟大家下分享下我实现的这个插件，欢迎各位感兴趣的开发者阅读本文。...难点分析实现可拖拽树形图可拖拽树形图的实现，也是本插件的核心功能，根据dom的特定规则构建树，实现拖拽功能，拖拽功能我使用的是JQueryUI提供的方法，获取当前拖拽结点和目标结点的原始dom，重新构建树...这一部分的实现代码位置: 「plugins/treeDrag/js/jquery.treeDrag.js」需要生成的dom规则如下：中国...文件如何使用在要使用插件的html文件里引入下述依赖 <!

2.4K2 0

04-老马jQuery教程-DOM节点操作及位置和大小

1. jQuery创建DOM标签 1.1 DOM动态创建标签的方法 DOM时代我们通过document的createElement方法动态创建标签。创建标签后，动态的给他添加属性。...; // 动态设置内部html标签 domDiv.innerHTML = '动态span'; // 动态追加到body标签中 document.body.appendChild...(domDiv); 1.2 jQuery动态创建标签的方式 jQuery的构造函数本身可以接收html标签的字符串来动态创建HTML标签。...props:用于附加到新创建元素上的属性、事件和方法返回值：返回新创建标签的jQuery包装对象 // jq的 appendTo，类似DOM的appendTo方法 $("Hello</...3.5 获取位置和偏移量 3.5.1 position() 概述获取匹配元素相对父元素的偏移。此方法只对可见元素有效。从边框开始计算。

2.2K9 0

04-老马jQuery教程-DOM节点操作及位置和大小

1. jQuery创建DOM标签 1.1 DOM动态创建标签的方法 DOM时代我们通过document的createElement方法动态创建标签。创建标签后，动态的给他添加属性。...(domDiv); 1.2 jQuery动态创建标签的方式 jQuery的构造函数本身可以接收html标签的字符串来动态创建HTML标签。...语法结构： jQuery(html, [props]) 参数: html:用于动态创建DOM元素的HTML标记字符串，注意标签尽量闭合。...props:用于附加到新创建元素上的属性、事件和方法返回值：返回新创建标签的jQuery包装对象 // jq的 appendTo，类似DOM的appendTo方法 $("Hello</...3.5 获取位置和偏移量 3.5.1 position() 概述获取匹配元素相对父元素的偏移。此方法只对可见元素有效。从边框开始计算。

6.1K0 0

Vuex原来可以这样上手

第一部分：我对vuex的理解这个重要的C是谁呢，鄙人认为就是此文章要介绍的Vuex（如果你想初识vue，可以移步vue原来可以这样上手这篇博文）。...第二部分：揭开vuex面纱本示例实现为一个输入框动态向下拉列表增加选择项的功能源码下载地址，先看效果图： ?...为了展示vuex的作用，此示例你可以看到如下内容：两个局部组件：输入和下拉列表组件一个全局组件：App，也是整个Vue实例的顶级组件一个jquery.js和bootstrap.js，用于实例下拉组件...重点关注inputComp组件中button子元素的on中的click方法，内部用dispatch触发了store中对应Id的actions。...vuex中创建的store实例传递进去。

8785 0

前端之jQuery

如果一个对象是 jQuery对象，那么它就可以使用jQuery里的方法：例如$(“#i1”).html()。 $("#i1").html()的意思是：获取id值为 i1的元素的html代码。...index的那个元素，这里的索引都是从0开始计时 :even // 匹配所有索引值为偶数的元素，从 0 开始计数 :odd // 匹配所有索引值为奇数的元素，从 0 开始计数 :gt(index)//...':'English'}) jQuery.fn.init [p#p1] 这里需要说明attr属性无法动态获取属性，可以通过prop进行动态获取属性。...(B)// 把A放到B的前面移除和清空元素 remove()// 从DOM中删除所有匹配的元素。...目的：我们已经创建好的事件如果想被动态创建的标签使用就需要用到事件委托，比如已经创建好了按钮点击的事件如果我们要将这个事件绑定给动态创建的一个按钮就通过事件委托，将事件绑定给按钮的父标签，这样当子标签

4.9K2 1

LayUI之旅-入门

最近要做一个项目，被要求前端要使用layui，甲方爸爸很牛逼的好吗，既然要求这样了，二话不说，撸起袖子就开干，由于从来没用过layui这个框架，对框架的不熟悉导致在使用的过程中是步步都是障碍啊，还是那句话...，不仅仅要PC端使用，还有移动端也是要使用的，所以需要实现左边栏的显示和隐藏），因为设计是右侧（页面内容区域）异步加载（这是最终确定的方案），所以页面上的所有事件的绑定都需要用事件委托来处理（刚开始我也没注意到这个问题...，是标签中data-id的属性值 //关于tabAdd的方法所传入的参数可看layui的开发文档中基础方法部分 element.tabAdd('frame...这个也怪自己没有经验，解决方法很简单，直接把事件委托到祖先元素上（这个元素必须是首页模板里面就存在的，也就是非异步加载的元素，否则绑定失败），我这里用的是JQ的 on() 方法，on() 方法自JQuery1.7...这里使用 on() 方法是因为她添加的事件处理程序适用于当前及未来的元素。提示：移除事件，使用 off() 方法。提示：添加只运行一次的事件然后移除，使用 one() 方法。

2.8K2 0

前端入门6-JavaScript客户端api&jQuery

首先创建一个对象： var obj = new Object(); 向对象中添加属性: obj.name = "dasu"; obj.age = 25; 对象的属性值可以是任何的数据类型，也可以是个函数...所以，下面会分别介绍 W3C 规范的标准 API 和 jQuery 的使用： DOM API document document 是内置的全局变量，在 JavaScript 可以直接通过该关键字使用，使用时会获取到当前...如果考虑以后维护方便（把 CSS 从 js 中分离出来）的话，推荐使用类的方式来操作。...html 创建元素 //类似于js中: document.createElement("标签名") var node1 = $("我是一个span元素");//返回的是jQuery...jquery1 查看元素的纯文本内容 console.log($(".main").text());//下面是元素标签和打出的日志 $(".main").prepend("我是第dsfds

6K4 0

js与jQuery的区别以及jQuery选择器和方法的使用

目录使用jQuery js与jQuery代码对比 jQuery选择器：用来选中元素基本方法 ---- js与jQuery代码对比 jQuery选择器：用来选中元素基本方法使用jQuery jQuery...3.3.1 建议下载开发版本 2、HBuilder使用创建项目 3、把jQuery库复制到项目中的js文件夹中 4、引入jQuery库文件: 注意：script标签中不要写内容，写jQuery代码就再写一对...script标签 js与jQuery代码对比案例1：点击按钮获取文本框中的值(JS对比jQuery)，如下图 JS版： jQuery版：先引入jQuery库 jQuery选择器：用来选中元素 ...现在呢，我想只改变第一个p 这几个字的颜色，大家来看一下该怎么写？...下拉要注意了，单选和多选直接就是找到选中的选项就行，可是下拉select标签中还有标签，我们要获取的是select中option选项的值，所以这个地方要注意写法。

15.4K1 0

Web前端知识(四)

4.1.3. jQuery基本使用第一步:下载jQuery库第二步:引入下载的jQuery库第三步:编写jQuery代码 4.1.4.jQuery获取标签 4.1.5.jQuery中事件介绍...; offset().top; position()获取某个元素相对于父元素的偏移位置 position().left position().top 4.1.7.2.操作HTML l使用jQuery...>获取属性值以www开头的对象button>br> button>获取属性值以cn结尾的对象button>br> ...button>获取属性值包涵it的对象button>br> button>获取属性值包涵www的对象并且title包含"是"的对象button><< span...() 淡出分别表示淡入、淡出,当然还有一个自动切换的方法: .fadeToggle() 切换淡入淡出上面三个透明度方法只能是从 0 到 100,或者从 100 到 0,如果我们想设置指定值就没

7.4K3 0

前端自动化测试框架cypress

UI自动化测试（端到端测试） UI测试的主要目的是，从软件使用者的角度来检验软件的质量，而UI自动化测试则是以自动化的方式来代替人工执行测试。...支持使用web浏览器上的开发工具直接调试，有丰富错误和堆栈跟踪信息，支持debug调试，随时暂停。自动等待ui更新，减少异步代码，在页面某些元素还没出来的时候，通常我们会添加等待的代码。...each() // 用来在元素或者数组中的特定索引处获取DOM元素。...类似于Jquery中nth:child() .eq() Cypress 常见操作访问某个 link //访问百度 cy.visit('httpf://www.baidu.com) 获取当前页面...$(btn).length>0{ cy.get(btn).click() } 获取元素属性值 //获取元素 btn 的文本 cy.get("#btn").then(function () { const

2.1K4 0

jQuery入门基础——选择器

jQuery 3.3.1 建议下载开发版本 2、HBuilder使用创建项目 3、把jQuery库复制到项目中的js文件夹中 4、引入jQuery库文件: 注意：script标签中不要写内容，写jQuery...代码就再写一对script标签 1、代码对比案例1：点击按钮获取文本框中的值(JS对比jQuery)，如下图 JS版： jQuery版：先引入jQuery库 jQuery选择器：用来选中元素 1.1...通配符：如果选中所有的元素可以直接用通配符 * 表示所有。选择器还可以组合多个一起使用，可以分为并集和交集。...现在呢，我想只改变第一个p 这几个字的颜色，大家来看一下该怎么写？...下拉要注意了，单选和多选直接就是找到选中的选项就行，可是下拉select标签中还有标签，我们要获取的是select中option选项的值，所以这个地方要注意写法。

9.9K2 0

【实战】我是如何在输入框实现@ At功能的

$refs.editor)“ 使用ref的方式而不是ID的方式呢？使用ref的好处是具有良好的可重用性和范围。因为ref只留在这个组件中，所以当您操作这个ref时，它不会干扰其他组件。...如果您使用id，它就有重复的问题，这就意味着你不可能重用某个元素。例：我再生成一个富文本组件就会初始化失败、因为id是唯一的。这就是为什么很多人推荐尽量少用ID的原因。...通过$event 可以获取键盘的keyCode 达到监听的目的 e.preventDefault 可以阻止我输入的@字符的默认事件 getSelection 可以获取光标的位置、给插入标签一个坐标。...我就就可以做到：随时@ 随时插入的功能拉～五、Android、IOS、Web显示多端一致每个端使用富文本都是不一样的、那我们应该如何做到统一数据统一呢？...获取光标的坐标在文本中的位置 caret-pos 从 textarea、contentedtiable 或 iframe 正文中获取插入符号/光标的位置/偏移量 import { position, offset

2.6K2 0

jQuery获取data-*属性值

下面就详细介绍四种方法获取data-*属性的值获取id 需要获取的就是data-id 和 dtat-vice-id...//data-前缀属性可以在JS中通过dataset取值，更加方便 console.log(getId.dataset.id);//112 //data-vice-id连接取值使用驼峰命名法取值 console.log...，data()的值进行修改并不会影响到DOM元素上的data-*属性的改变。...data()的本质其实是将一个 “cache” 附加到了对象上，并使用了一个特殊的属性名称。...所以上述代码中，虽然对div进行了data()赋值操作，但HTML代码中div的data-appid的值仍然为123，因为data()只是修改了缓存的那个值，此时进行$('#myDiv').data("

2.7K2 0

JQuery 入门 - 附案例代码

//$(dom对象); jq对象和dom对象(重要) DOM对象：使用JavaScript中的方法获取页面中的元素返回的对象就是dom对象。...jQuery对象：jquery对象就是使用jquery的方法获取页面中的元素返回的对象就是jQuery对象。...jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素。...过滤选择器名称用法描述 :eq（index） $(“li:eq(2)”).css(“color”, ”red”); 获取到的li元素中，选择索引号为2的元素，索引号index从0开始。...》】 jQuery特殊属性操作 val方法 val方法用于设置和获取表单元素的值，例如input、textarea的值 //设置值 $("#name").val('张三');

13.9K1 0

加点JavaScript魔法

例如，ID = 123的用户动态中具有id="post123"属性。然后使用jQuery，在JavaScript中使用表达式$('#post123')在DOM中定位此元素。...在本处，返回值将是具有该类的所有元素的集合 05 弹窗和 DOM 元素通过使用Bootstrap文档中的弹出窗口示例并在浏览器的调试器中检查DOM，我确定Bootstrap将弹出窗口组件创建为DOM... 为了避免弹出窗口出现在元素中，我要使用的是另一个技巧。我要将元素封装在元素中，然后将悬停事件和弹出窗口与相关联。...当我在刚刚创建的元素上调用popover()初始化函数时，Bootstrap框架会为我动态地插入弹出组件 06 鼠标悬停事件正如我上面提到的，Bootstrap中的popover组件使用的悬停行为不够灵活...为了提取用户名，我可以从开始浏览DOM，移至第一个子元素，即元素，然后从中提取文本，这就是在网址中要使用的用户名。

3.9K1 0

第86天：HTML5应用程序标签和智能表单

/html> 运行效果：二、自定义属性 1、关键字：（‘data-id’，key）； this是当前点击对象，他有一个dataset属性， dataset是去掉data-之后的值当网页超链接多了之后...--start 集合中的第一个文档--> 四、结构数据标记（方便网络爬虫解析）我叫我养了一条叫旺财的金毛</span...在数组中id是数组的下标 12 console.log(array[id]); 13 } 14 for (var id in array){ 15 // 在数组中

8192 0

Cypress系列（15）- Cypress 元素定位选择器

ID 或 class 是动态生成的你使用了 CSS选择器去定位，但开发把元素CSS样式改掉了这种情况下通常会测试失败 Cypress 如何解决上述难题提供了 data-* 属性，包含了下面三个定位器...data-cy data-test data-testid 重点它们都是 Cypress 专有的定位器，仅用来测试属性和元素的行为或样式无关，意味着即使 CSS 样式或 JS 行为改变，也不会导致测试失败...data-* 注意：在实际项目中，需要自己将属性加到元素中，意味着你得有权限修改代码 data-* html 前端代码 ?...$定位器针对难以用普通方式定位的元素，Cypress 还提供了 JQuery 选择器（对我来说简直是福音）格式： Cypress.$(selector) Cypress.....html 只需要关注选择器那一列就好啦结尾本文是博主基于对蔡超老师的《Cypress 从入门到精通》阅读理解完后输出的博文，并附上了自己的理解对书籍感兴趣的，可以参考本篇博客：https://www.cnblogs.com

1.7K4 0

移除jQuery好像也没那么难

我最近从我的博客中移除了 jQuery，并发现自己不断地在谷歌上搜索一些模式。...为了节省大家的时间，我编写了这个实用的参考指南，列出了一些最常见的 jQuery 模式及其在 JavaScript 中的等价物。我们将涵盖如何从这些概念和函数迁移到纯 JavaScript。...jQuery 的 .on() 方法使你可以处理动态添加到 DOM 中的元素的事件。...JavaScript 中，您可以使用 createElement() 方法动态创建一个元素，并传入标签名来指定要创建的元素类型： // 创建 div 和 span 元素 $(""); $(...""); // 使用 JavaScript 创建 div 和 span 元素 document.createElement("div"); document.createElement(

1291 0

Web前端JQuery面试题（二）

通过jquery自身的方法获取页面元素的对象，就是jquery对象。...:lt(index) 获取小于给定索引值的元素 :gt(index) 获取大于给定索引值的元素 :eq(index) 获取给定的索引值的元素，从0开始 :odd 获取奇数的元素 :even 获取偶数的元素...*= value] 匹配有包含某些值的特定元素 [selector1][selector2] 同时满足多个条件使用子元素过滤选择器： :nth-child 从1开始的，匹配每个父元素下第n个元素...，用于获取select中多个选项值设置元素样式 css(name,value); name 样式名称，value样式值添加样式 addClass(class) 和 addClass(class0...切换样式 toggleClass(class) 如果有该类class就删除，如果没有就添加进行方法间的切换效果删除类 removeClass(class); 创建节点元素，动态创建页面元素

1.9K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

我想使用jquery从动态创建的span元素中获取data-id和data-test的值

相关·内容

如何使用 HTML、CSS 和 Vanilla JavaScript 以及本地存储创建待办事项应用程序

树形图拖拽插件tree-drag | 开源项目推荐

04-老马jQuery教程-DOM节点操作及位置和大小

04-老马jQuery教程-DOM节点操作及位置和大小

Vuex原来可以这样上手

前端之jQuery

LayUI之旅-入门

前端入门6-JavaScript客户端api&jQuery

js与jQuery的区别以及jQuery选择器和方法的使用

Web前端知识(四)

前端自动化测试框架cypress

jQuery入门基础——选择器

【实战】我是如何在输入框实现@ At功能的

jQuery获取data-*属性值

JQuery 入门 - 附案例代码

加点JavaScript魔法

第86天：HTML5应用程序标签和智能表单

Cypress系列（15）- Cypress 元素定位选择器

移除jQuery好像也没那么难

Web前端JQuery面试题（二）

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐