Question

我正在尝试将数组存储在HTML数据标记中。例如：

<div data-locs="{'name':'London','url':'/lon/'},{'name':'Leeds','url':'/lds'}">

我正在使用jQuery访问该数据。我意识到这是存储为一个字符串，我已经尝试了各种方法将其转换为数组，但我已经碰壁了。如果你看看这个jsFiddle页面，你会看到我正在尝试做的一个完整的例子。

http://jsfiddle.net/B4vFQ/

有什么想法吗？

谢谢！

Answer 1

如果对数组使用有效的JSON（[和]，请使用双引号而不是单引号，如下所示：

<div id="locations" data-locations='[{"name":"Bath","url":"/location/bath","img":"/thumb.jpg"},{"name":"Berkhamsted","url":"/location/berkhamsted","img":"/thumb.jpg"}]'>

然后你所拥有的（使用.data()）来获取数组将起作用：

$('#locations').data('locations');

You can test it here

Answer 2

尝试将[和]添加到开头和结尾（这使其成为有效的JSON）。执行此操作后，您可以使用JSON.parse()将其转换为本机JavaScript对象。

Answer 3

如果您出于某种原因坚持使用双引号，则需要对数据属性中的引号进行 html 编码。

<div data-dwarfs="[&quot;Doc&quot;, &quot;Sneezy&quot;, &quot;Happy&quot;]"></div>

当然，如果您可以访问 PHP 或其他一些预处理器，则可以使用以下内容：

<?php
    $dwarfs = ['Doc', 'Sneezy', 'Happy'];
?>
    <div data-dwarfs="<?php echo htmlspecialchars(json_encode($dwarfs), ENT_QUOTES, 'UTF-8') ?>"></div>
<?php

Answer 4

试试这个：

var testOne = eval("new Array(" + $('#locations').data('locations') + ")");

在jsfiddle中查看。

使用HTML数据标记和jQuery存储和使用数组

4 个答案: