jquery - 通过数据属性选择元素

Question

希望使用 JSON 更新一些 HTML，并且不想要像 Handlebars 等完整的模板引擎。我以为我只是分配一个数据值并进行迭代，但我收到了错误。引用https://api.jqueryui.com/data-selector/但是，也许不适用于 jQuery 3？如何选择具有 data 属性的元素？

旁注。虽然不是我的问题，但我的最终目标是使用一个对象更新 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 Uncaught Error: Syntax error, unrecognized expression: unsupported pseudo: data
at Function.Sizzle.error (jquery-3.2.1.js:1580)
at PSEUDO (jquery-3.2.1.js:1927)
at matcherFromTokens (jquery-3.2.1.js:2476)
at Sizzle.compile (jquery-3.2.1.js:2630)
at Sizzle.select (jquery-3.2.1.js:2716)
at Function.Sizzle [as find] (jquery-3.2.1.js:884)
at jQuery.fn.init.find (jquery-3.2.1.js:2922)
at Object.success (display.js:21)
at fire (jquery-3.2.1.js:3317)
at Object.fireWith [as resolveWith] (jquery-3.2.1.js:3447)
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
Sizzle @ jquery-3.2.1.js:884
find @ jquery-3.2.1.js:2922
success @ display.js:21
fire @ jquery-3.2.1.js:3317
fireWith @ jquery-3.2.1.js:3447
done @ jquery-3.2.1.js:9272
(anonymous) @ jquery-3.2.1.js:9514
XMLHttpRequest.send (async)
send @ jquery-3.2.1.js:9566
ajax @ jquery-3.2.1.js:9173
(anonymous) @ display.js:16
dispatch @ 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);
});

这就是所需要的。