Question

如何使用JSON.stringify将此Javascript数组[li.one, li.one, li.one, li.two, li.two, li.two]转换为JSON数组？

使用以下Javascript：

    var stringsToStringify = $('.one, .two'),
            stringArray = []

    $.each(stringsToStringify, function (i, v) {
        stringArray[i] = v
    })

    console.log(stringArray)
    var jsonString = JSON.stringify(stringArray)
    console.log(jsonString)
    console.log(JSON.parse(jsonString))

返回：

 [li.one, li.one, li.one, li.two, li.two, li.two]

[{"jQuery110203514890133216494":1},{"jQuery110203514890133216494":2},{"jQuery110203514890133216494":3},{"jQuery110203514890133216494":4},{"jQuery110203514890133216494":5},{"jQuery110203514890133216494":6}]

[Object { jQuery110203514890133216494=1}, Object { jQuery110203514890133216494=2}, Object { jQuery110203514890133216494=3}, Object { jQuery110203514890133216494=4}, Object { jQuery110203514890133216494=5}, Object { jQuery110203514890133216494=6}]

如果我们将stringArray从[]更改为{}，则会返回以下内容：

 [li.one, li.one, li.one, li.two, li.two, li.two]

[{"jQuery110207305097851789301":1},{"jQuery110207305097851789301":2},{"jQuery110207305097851789301":3},{"jQuery110207305097851789301":4},{"jQuery110207305097851789301":5},{"jQuery110207305097851789301":6}]

[Object { jQuery110207305097851789301=1}, Object { jQuery110207305097851789301=2}, Object { jQuery110207305097851789301=3}, Object { jQuery110207305097851789301=4}, Object { jQuery110207305097851789301=5}, Object { jQuery110207305097851789301=6}]

期望的结果是将[li.one, li.one, li.one, li.two, li.two, li.two]“字符串化”到JSON数组中。

这看起来像一个循环引用。向JSON.stringify提供html元素数组的最佳方法是什么？

Fiddle

Answer 1

$('.one, .two')返回一个jQuery对象，其中包含对具有这两个类的DOM元素的引用，它不返回字符串数组。因此，在$.each()中，v参数不是字符串，而是DOM元素。如果您希望该元素的HTML文本（或仅文本）使用$(v).html()或$(v).text()：

var stringArray = [];
$('.one, .two').each(function(i, v) {
  stringArray.push( $(v).html() );
});
var jsonString = JSON.stringify(stringArray);

演示：http://jsfiddle.net/stL1hz9t/

请注意，我使用的是$('.one, .two').each()而不是generic iterator $.each() method，因为您希望循环遍历jQuery对象中的项目。（$.each()会起作用，但它会为你的代码增加一些额外的复杂性。）你不需要你的stringsToStringify变量（如上所述，它实际上并不包含字符串）。

或者你可以使用.map() method来简化代码：

var stringArray = $('.one, .two').map(function (i, v) {
                    return $(v).html();
                  }).get();
var jsonString = JSON.stringify(stringArray);

演示：http://jsfiddle.net/stL1hz9t/1/

Answer 2

您创建的数组仅返回引用原始DOM的jQuery对象。要输出DOM元素，请执行以下操作：

$.each(stringsToStringify, function (i, v) {
    stringArray[i] = $("<p>").append($(v).clone()).html();
})

请注意，整个$("<p>").append($(v).clone()).html()构造会创建原始元素的克隆，然后将克隆附加到新父级，然后从中获取HTML。如果您只是致电.html()，则只能获取<li>代码的内容，而不会获得代码本身。

请参阅此处的小提琴：http://jsfiddle.net/f0xchck6/

JSON.stringify一个HTML元素/字符串数组

2 个答案: