Q:

JSON.stringify an Array of HTML Elements/Strings

How can we convert this Javascript Array  [li.one, li.one, li.one, li.two, li.two, li.two] into a JSON array using JSON.stringify? 
Using the following 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))

Returns: 
 [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}]

If we change the stringArray from [] to {} the following is returned:
 [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}]

The desired result is to have [li.one, li.one, li.one, li.two, li.two, li.two] "stringified" into a JSON Array.
This looks like a circular reference. What is the best way to supply the array of html elements to JSON.stringify?
Fiddle

A:

$('.one, .two') returns a jQuery object containing references to whichever DOM elements have those two classes, it doesn't return an array of strings. So within your $.each(), the v parameter is not a string, it is a DOM element. If you want the HTML text (or just the text) of that element use $(v).html() or $(v).text():
var stringArray = [];
$('.one, .two').each(function(i, v) {
  stringArray.push( $(v).html() );
});
var jsonString = JSON.stringify(stringArray);

Demo: http://jsfiddle.net/stL1hz9t/
Note that I've used $('.one, .two').each() rather than the generic iterator $.each() method, because you want to loop over the items in a jQuery object. ($.each() will work, but it adds just that slight bit of extra complexity to your code.) You don't need your stringsToStringify variable (which as I mentioned above doesn't actually contain strings).
Or you can use the .map() method to simplify the code somewhat:
var stringArray = $('.one, .two').map(function (i, v) {
                    return $(v).html();
                  }).get();
var jsonString = JSON.stringify(stringArray);

Demo: http://jsfiddle.net/stL1hz9t/1/

