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

Question

希望用 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
Sizzle.compile@jquery-3.2.1.js: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
fireWith@jquery-3.2.1.js: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
elemData.handle@jquery-3.2.1.js:5014

Answer 1

只需将其更改为：

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

这就是我们所需要的。