按数据属性选择元素[重复]

Posted 2023-03-05

【中文标题】按数据属性选择元素[重复]

【英文标题】：Select element by data attribute [duplicate]

【发布时间】：2018-05-20 10:42:06

【问题描述】：

希望用 JSON 更新一些 html，并且不想要一个完整的模板引擎，如把手等。我以为我会分配一个数据值并迭代，但我收到错误。参考https://api.jqueryui.com/data-selector/，但是，可能不适用于 jQuery 3？如何选择具有数据属性的元素？

旁注。虽然不是我的问题，但我的最终目标是使用一个对象更新 HTML，该对象包含的名称/值等于我在下面列出的数据属性的值。如果有更好的方法，请发表评论。谢谢

<table class='table' id="default-template">
    <tr><td>Server IP</td><td data-name="server"></td></tr>
    <tr><td>Server Port</td><td data-name="port"></td></tr>
    <tr><td>Reconnect Timeout (seconds)</td><td data-name="reconnectTimeout"></td></tr>
    <tr><td>Response Timeout (seconds)</td><td data-name="responseTimeout"></td></tr>
    <tr><td>Verbose Log</td><td data-name="verboseLog"></td></tr>
    <tr><td>Device Static IP</td><td data-name="ip_address"></td></tr>
    <tr><td>Router IP</td><td data-name="router_ip"></td></tr>
    <tr><td>Domain Name Server IP</td><td data-name="domain_name_server_ip"></td></tr>
</table>

$('#default-template').find('td:data(name)').each(function(i)
    console.log(i,this);
);

display.js:20 ip_address: "10.120.11.30/24", router_ip: "10.120.11.1", domain_name_server_ip: "10.120.11.1", server: "12.34.56.78", port: "1337", ... jquery-3.2.1.js:1580 未捕获错误：语法错误，无法识别的表达式：不支持的伪：数据 在 Function.Sizzle.error (jquery-3.2.1.js:1580) 在 PSEUDO (jquery-3.2.1.js:1927) 在 matcherFromTokens (jquery-3.2.1.js:2476) 在 Sizzle.compile (jquery-3.2.1.js:2630) 在 Sizzle.select (jquery-3.2.1.js:2716) 在 Function.Sizzle [as find] (jquery-3.2.1.js:884) 在 jQuery.fn.init.find (jquery-3.2.1.js:2922) 在 Object.success (display.js:21) 着火了 (jquery-3.2.1.js:3317) 在 Object.fireWith [as resolveWith] (jquery-3.2.1.js:3447) Sizzle.error @ jquery-3.2.1.js:1580 伪@ jquery-3.2.1.js:1927 matcherFromTokens @ jquery-3.2.1.js:2476 [e-mail]:2630 Sizzle.select @ jquery-3.2.1.js:2716 嘶嘶声@jquery-3.2.1.js:884 查找@jquery-3.2.1.js:2922 成功@display.js:21 火@jquery-3.2.1.js:3317 [e-mail]:3447 完成@jquery-3.2.1.js:9272 （匿名）@ jquery-3.2.1.js:9514 XMLHttpRequest.send（异步） 发送@jquery-3.2.1.js:9566 ajax @ jquery-3.2.1.js:9173 （匿名）@display.js:16 调度@jquery-3.2.1.js:5206 [e-mail]:5014

【问题讨论】：

api.jquery.com/attribute-equals-selector

你是否包含了 jquery-ui？这个选择器选项是在 jquery-ui 中定义的，而不是 jquery

@ztadic91 你是绝对正确的。我没有注意到这显然是错误的原因。谢谢

但是如果你只需要 jquery-ui ，那就使用@SWC's answer

我不会只为这个选择器包含一个完整的其他库，尤其是当你已经在使用的库有替代品时

【参考方案1】：

只需将其更改为：

$('#default-template td[data-name]').each(function(i)
    console.log(i,this);
);

这就是我们所需要的。

【讨论】：

完美！谢谢