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未捕获错误：语法错误，无法识别的表达式：unsupported pseudo：data
      在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）
      at Object.success（display.js：21）
      在火上（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
  找到@ jquery-3.2.1.js：2922
  成功@ display.js：21
  fire @ 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（async）
  发送@ 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);
});

这就是所需要的。

按数据属性选择元素

1 个答案: