Question

从this StackOverflow answer我发现了JavaScript Object Notation（JSON）的强大功能。在试图愚弄它时，为了更好地掌握它的实用性，我尝试对元素应用一些额外的属性。我的问题是如何让JSON将嵌套节点解析为字符串而不是对象？作为该问题的后续内容，在JSON声明中嵌套CSS样式的正确语法是什么？

以下工作：

'style': "width: 200px; color: #ACE"

不工作（返回对象对象），但我希望它可以工作（有一些语法可以实现吗？）。

'style': [{
   'width': '200px'
}]

＆＃13;

//https://stackoverflow.com/a/37887133/5076162

var data = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry <grab> First Item</grab>Lorem Ipsum is simply dummy text of the printing and typesetting industry.<grab>Second Item</grab>Lorem Ipsum is simply dummy text of the printing and typesetting industry.<grab>Third Item</grab>Lorem Ipsum is simply dummy text of the printing and typesetting industry.',


  // creating a <div> element with the data string
  // as its innerHTML:
  elem = $('<div />', {
    'html': data,
    'title': "myClass",
    'style': "width: 200px; color: #ACE",
    //'style': [{
    //  'width': '200px'
    //}]
  }),

  // using find() to retrieve the <grab> elements from
  // within the newly-created <div>, and using map()
  array = elem.find('grab').map(function() {
    // ...to return the trimmed text of each
    // found element:
    return this.textContent.trim();

    // converting the map to an Array:
  }).get();

// appending the joined array (joining the array together
// with a comma-white-space sequence) to the <body>:    
$('body').append(array.join(', '));
// => First Item, Second Item, Third Item
elem.appendTo($('body'));
console.log(JSON.stringify($('div').attr('style')));

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

＆＃13;

Answer 1

如此接近！它是：

'css':{ 'width': '200px' }

Answer 2

style只能处理它将应用的字符串非字符串值toString()。您需要在jQuery中使用css，它也可以处理对象。

根据jQuery documentation here：

重要提示： 如果传递了第二个参数，则第一个参数中的HTML字符串必须表示没有属性的简单元素。从jQuery 1.4开始，可以传入任何事件类型，并且可以调用以下jQuery方法：val， css ，html，text，data，width，height或offset。

'css':{ 'width': '200px' }

＆＃13;

//http://stackoverflow.com/a/37887133/5076162

var data = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry <grab> First Item</grab>Lorem Ipsum is simply dummy text of the printing and typesetting industry.<grab>Second Item</grab>Lorem Ipsum is simply dummy text of the printing and typesetting industry.<grab>Third Item</grab>Lorem Ipsum is simply dummy text of the printing and typesetting industry.',


  // creating a <div> element with the data string
  // as its innerHTML:
  elem = $('<div />', {
    'html': data,
    'title': "myClass",
    'css': {
      'width': '200px',
      'color':'#ACE'
    }
  }),

  // using find() to retrieve the <grab> elements from
  // within the newly-created <div>, and using map()
  array = elem.find('grab').map(function() {
    // ...to return the trimmed text of each
    // found element:
    return this.textContent.trim();

    // converting the map to an Array:
  }).get();

// appending the joined array (joining the array together
// with a comma-white-space sequence) to the <body>:    
$('body').append(array.join(', '));
// => First Item, Second Item, Third Item
elem.appendTo($('body'));
console.log(JSON.stringify($('div').attr('style')));

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

＆＃13;

JSON样式返回对象对象

2 个答案: