1

我在一个名为test的变量中有（Srigified）json 数据。我正在动态构建 html 元素，并且我希望将json 数据插入到元素属性中。

var templateHtml = "":
    $.each(loopValues, function(Key, Value) { // Loops which constructs dynamic data
        var test = '{"type": "page"}';  // this is the json data which need to be appended as data-all attribute value.
        templateHtml = templateHtml.concat("<a data-all="+ test +" href='javascript:;' class='icon' id='TestTt'></a>");
    }
$("#sortable1").html(templateHtml);

执行完这些行后，当我看到构造的元素时，它完全被打乱了。如何在元素属性中获取格式良好的 json 数据？

在此处输入图像描述

我不想在构造 html 之后使用 jquery 在属性上附加 json 数据。我希望在 html 构建时使用此功能。

我参考了 http://gabrieleromanato.name/jquery-binding-animation-data-to-elements-with-json/ http://api.jquery.com/jQuery.parseJSON/

任何想法 ？

4

3 回答 3

2

首先，您的代码缺少一些语法元素：

var templateHtml = ""; // use ; not :
$.each(loopValues, function (Key, Value) { // Loops which constructs dynamic data
    var test = '"{type": "page"}'; // this is the json data which need to be appended as data-all attribute value.
    templateHtml = templateHtml.concat("<a data-all=" + test + " href='javascript:;' class='icon' id='TestTt'></a>");
}); //close the loop call

然后，您需要在附加测试变量时在其周围添加单引号。我建议您选择在哪里使用单引号或双引号，并永久坚持选择。我个人在 HTML 中使用双引号，在 JS 中使用单引号：

var templateHtml = '';
$.each(loopValues, function (Key, Value) { // Loops which constructs dynamic data
    var test = "{type: 'page'}"; // this is the json data which need to be appended as data-all attribute value.
    //since its JSON i use single quote inside but double outside.
    templateHtml = templateHtml.concat('<a data-all="' + test + '" href="javascript:;" class="icon" id="TestTt"></a>');
});

小提琴在这里

于 2013-06-11T11:55:32.843 回答
1

您可以将 json 保存在没有data-属性的 DOM 中，只需使用：

$("#sortable1").html("<a href='javascript:;' class='icon' id='TestTt'></a>");
$( "#sortable1 > a" ).data( 'all', test );

根据 jQuery .data()API。数据值可以是任何 JavaScript 类型。

要获取此 JSON，您只需编写：

console.log( $( "#sortable1 > a" ).data( 'all' ) );

更新：

但更好的是在创建过程中添加数据：

$.each(loopValues, function(Key, Value) { // Loops which constructs dynamic data
    $( "#sortable1" ).append( $( "<a/>" ).addClass( "icon" ).data( "all", {"type": "page"} ).attr( "id", "TestTt" ) );
});
于 2013-06-11T11:33:43.587 回答
1

您需要的是使用 jQuery 以 json 作为参数创建元素。

例如创建一个简单的表

var $table = new $('<table>', { 'cellpadding' : '5', 'cellspacing' : '4' });
var $tr = new $('<tr>');
var $td = new $('<td>', { 'class' : 'test' });
$td.text('cell contents');
$tr.append($td);
$table.append($tr);

$('body').append($table);
于 2013-06-11T11:35:42.747 回答