- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在测试 jQuery 的 data()
方法,它看起来非常强大。这实际上是为了测试我将为单元测试制作的固定装置(通过用双引号替换单引号来解析 JSON 元素)。
var test = $('#test');
console.log(test.data('table[data-table-values]'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="test" data-table-values="'{'header': ['value1', 'value2']}'"></table>
它返回未定义
。然而,根据我的理解,这应该返回选择器是什么,在本例中应该是: '{'header': ['value1', 'value2']}'
我错过了什么吗?
编辑:作为引用,我正在测试执行此操作的函数:
function parseStuff(str) {
return JSON.parse(
str
.substring(1, (str.length - 1))
.replace(/'/g, '"')
);
}
但问题是,传递给 Controller /容器的内容(我的 Rails 知识有限,所以我继续阅读我能读到的内容)。但例如某些代码如下所示:
<instance of container/controller>.data('tableValues')
其中“tableValues”在代码的前面被定义为选择器,并且容器/ Controller 的实例可能是我假设的表对象本身:
tableValues: 'table[data-table-options]' //A bunch more of these selectors are defined
所以本质上我正在尝试设置一个 HTML 固定装置,我可以对其进行测试。我发布的 HTML 是它在 chrome 开发工具中的显示方式(显然 table 元素中有更多内容,但我只是特别关注这个选择器)
最佳答案
您将该属性引用为table[data-table-values]
,这在两个帐户上是不正确的:
table[]
不是必需的。我不确定你为什么使用它。这不是选择器,这是属性查找。data-table-values
应为table-values
。您的 HTML 属性称为“data-table-values”,但 .data()
查找不需要任何 HTML data-* 属性。 这两个方法的最终结果都是 .data('table-values')
,如底部示例所示。
如果您想查找实际的属性值,那么您需要包含 data-
前缀,因为您正在搜索该特定的 HTML 属性;例如,$test.attr('data-table-values')
,但对 data-* 属性执行此操作是违反惯例的。
关于 .data()
方法,您应该注意的一件事是,它在内存中运行。它不会更新您的 HTML。如果您使用任何类型的检查器,您都会看到设置 $test.data('foo','bar')
,它不会将 foo
属性绑定(bind)到元素,也不修改 DOM,它在 jQuery 内部管理值。
要将值用作 JSON,您需要将其存储为格式正确的 JSON,现在您使用单引号作为封装 JSON 字符串分隔符 '{'':[]}'
和还可以界定对象键。您必须使用双引号来表示有效的 JSON。
在下面的示例中,我剪掉了开头和结尾的单引号 ('
),然后用双引号 "
替换键周围的所有单引号。I为了清楚起见,将其分成几行,但可以压缩为几行。
注意:如果 JSON 有效并正确存储在 data-*
属性中,则客户端不会需要做很多工作来擦洗它,代码会更简单
var $test = $('#test');
var str = $test.data('table-values'); // <=== was:"table[data-table-values]"
console.log('data-* value:', str);
// format to a valid JSON string
str = str.replace(/^'+/, ''); // remove leading single quote
str = str.replace(/'+$/, ''); // remove ending single quote
str = str.replace(/'/g, '"'); // use double quotes
console.log('Replaced single quotes:', str);
// make JS object
var obj = JSON.parse(str);
console.log('obj:', obj);
console.log('obj.header[1]:', obj.header[1]);
// make JSON string
console.log('JSON:', JSON.stringify(obj));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="test" data-table-values="'{'header': ['value1', 'value2']}'"></table>
以下是 @guest271314 的示例的建议,它演示了 HTML 中具有格式良好的 JSON。
请注意,行数少得多(获取 JSON 对象只需要一行)。提供的是 jQuery 和 ES6 等效项:
// jQuery
var obj = $('#test').data('table-values');
console.log('obj:', obj);
console.log('obj.header[1]:', obj.header[1]);
console.log('JSON.stringify(obj):', JSON.stringify(obj));
// ES6
var obj2 = JSON.parse(document.querySelector('#test').dataset['tableValues']);
console.log('obj2:', obj2);
console.log('obj2.header[1]:', obj2.header[1]);
console.log('JSON.stringify(obj2):', JSON.stringify(obj2));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="test" data-table-values='{"header": ["value1", "value2"]}'></table>
关于javascript - Jquery data() 在 CSS 选择器上返回未定义,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42963276/
只是想知道这些结构之间有什么区别(text、data、rodata、bss 等)在链接描述文件中: .data : { *(.data) } .data : { *(.data*) }
Data 定义为其核心功能之一 gfoldl : gfoldl :: (Data a) => (forall d b. Data d => c (d -> b) -> d -> c b)
以下之间有什么区别:data-sly-use、data-sly-resource、data-sly-include 和 数据-sly-模板?我正在阅读 Sightly AEM 上的文档,我非常困惑。
我有一个 Spring Boot、Spring Data JPA (hibernate) Web 应用程序,并且想引入文本搜索功能。 我理解以下内容 hibernate search 或 spring
我不知道我的代码有什么问题。我读了其他有同样问题的人的一些问题,但没有找到答案。当我尝试编译时出现以下错误: ||In function 'main':| |35|error: expected ex
我不太确定为什么会收到此错误或其含义。我的数据框称为“数据”。 library(dplyr) data %>% filter(Info==1, Male==1) %>% lm(CFL_
我一直在 GitHub 等更现代的网站上看到这些属性,它们似乎总是与自定义的弹出窗口一致,如 title 属性。 Option 1 Option 2 Option 3 Option 4 我在 HTML
如何用 iCloud Core Data 替换我现有的 Core Data?这是我的持久商店协调员: lazy var persistentStoreCoordinator: NSPersistent
我一直在 GitHub 等更现代的网站上看到这些属性,它们似乎总是与自定义的弹出窗口一致,如 title 属性。 Option 1 Option 2 Option 3 Option 4 我在 HTML
我正在通过 this project 在 Android 上摆弄 node.js ,我需要一种方法将 js 文件部署到私有(private)目录(以隐藏源代码,防止用户篡改),该目录也物理存在于文件系
大家好我有点沮丧,所以我希望得到一些帮助。我的项目在 SwiftUI 中。我想使用图像选择器将图像保存到 Core Data。我实现了让 ImagePicker 工作,但我正在努力转换 Image -
我有以下数据和代码: mydf grp categ condition value 1 A X P 2 2 B X P 5
我一直在努力解决这个问题,但我根本找不到任何解决问题的方法。希望这里有人可以提供帮助。 我正在尝试为具有以下结构的某些数据创建个人选择矩阵: # A tibble: 2,152 x 32 a
我了解 Data.Map.Lazy 和 Data.Map.Strict 是不同的。但是,当您导入 Data.Map 时,您究竟导入了什么:严格的、惰性的还是两者的组合? 最佳答案 懒人。看着docs
我正在开发一个 C 程序,用于从 BerkeleyDB DBTree 数据库中提取数据值与特定模式匹配的记录。我创建数据库,打开它,将键的 DBT 和数据的另一个 DBT 清零,将 DBT 标志设置为
所以我有以下成员(member)历史表 User_ID | Start date | End Date | Type(0-7) | ---------------------------
随着最近推出的包dataframe ,我认为是时候正确地对各种数据结构进行基准测试,并突出每种数据结构的优势。我不是每个人的不同优势的专家,所以我的问题是,我们应该如何对它们进行基准测试。 我尝试过的
我有来自 API 的数据,但无法将数组中的数据设置为 vue.js 中的 this.data这是来自 API 的数据(JSON) 你能告诉我这个语法吗 {"id":1613, "name_org":"
在 Vue.js到目前为止,我已经找到了两种定义数据的方法:data: {} 和 data() { return; }. data: { defaultLayout: 'default' }
我正在研究Spring Data Rest Services,并在自定义拦截器中遇到一些问题。之前我使用spring-data-rest-webmvc 2.2.0并以以下方式添加了拦截器。 publi
我是一名优秀的程序员,十分优秀!