Question

有关如何映射以下HTML的任何建议，以获取对象的JS数组，如下例所示？

<ul>
    <li class="header">Header</li>
    <li><span>val1</span></li>
    <li><span>val2</span></li>
    <li><span>val3</span></li>
    <li class="header">Another Header</li>
    <li><span>val4</span></li>
    <li><span>val5</span></li>
</ul>

JS对象数组：

    [{
        "header": "Header",
        "values": ["val1", "val2", "val3"]
    },
    {
        "header": "Another Header",
        "values": ["val4", "val5"]
    }]

这是我自己走了多远：

var els = $('ul > li');
var obj = [];
els.each(function(index, item) {
    if ($(item).hasClass("heading")) {
        // maybe push this object with a heading into an array, 
        // then add to the object on following iterations and create next object when next .heading
    }
});

Answer 1

正如您在问题中所说，您希望映射您的HTML。所以请使用.map！

此代码可以执行此操作：

var arr = $('.header').map(function(){
    var obj = {}
    obj.header = $(this).text();

    obj.values = $(this).nextUntil('.header').map(function(){
        return $(this).text();
    }).get()

    return obj;
}).get()

小提琴：http://jsfiddle.net/2UDwc/7/

Answer 2

一种不像Karl-AndréGagnon所提供的优雅解决方案，不使用地图：

var arr = [];
var valuesArray = [];
var obj = {};

$('li').each(function(index, item) {   
    if ($(item).hasClass('header')) {
        // If not the first section of header / values
        if(index > 1) {
            // Add values to the final array
            obj.values = valuesArray;
            arr.push(obj);

            // Reset the vars
            obj = {};
            valuesArray = [];
        }

        // Add header to the current object
        obj.header = $(item).text();
    } else {
        // Add values
        valuesArray.push($(item).text());
    }
});

// Add the last object to the array
obj.values = valuesArray;
arr.push(obj);

console.log(arr);

http://jsfiddle.net/XXKKr/3/

jQuery - 将HTML映射到javascript对象数组中

2 个答案: