Select element by data attribute

Question

Wish to update some HTML with JSON, and don't want a full blown template engine like handlebars, etc. Thought I would just assign a data value and iterate over, but I am receiving errors. Reference https://api.jqueryui.com/data-selector/, however, maybe not applicable with jQuery 3? How can I select the elements which have a data attribute?

Side note. While not my question, my end goal is to update the HTML with an object which contains name/values equal to the values of the data attributes I have listed below. Please comment if there is a better way to do so. Thanks

<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

did you include jquery-ui? this selector option is defined in jquery-ui not jquery — ztadic91, Dec 06 '17 at 14:10
@ztadic91 You are absolutely correct. I hadn't noticed which obviously was the cause of the error. Thanks — user1032531, Dec 06 '17 at 14:12
but if you need jquery-ui only for that, rather use @SWC's answer — ztadic91, Dec 06 '17 at 14:12
I wouldn't include an entire other library just for this selector, especially when there's an alternative with the library you're already using — Rory McCrossan, Dec 06 '17 at 14:18

score 4 · Accepted Answer · answered Dec 06 '17 at 14:05

4

Just change it to:

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

That's all that's needed.

answered Dec 06 '17 at 14:05

Perfect! Thanks – user1032531 Dec 06 '17 at 14:10

Select element by data attribute

1 Answers1