Question

假设在HTML中有一个选择菜单，我想要一个表示菜单中的值和描述的查找表。

<select id="carMenu">
    <option value="P">Park</option>
    <option value="R">Reverse</option>
    <option value="N">Neutral</option>
    <option value="D">Drive</option>
</select>

现在，在Javascript / JQuery中构建查找表的一种方法如下：

var lookup = {}; $('#carMenu>option').map(function()
{ 
    lookup[this.value]=this.innerHTML; 
})

获取

{
    P: "Park", 
    R: "Reverse", 
    N: "Neutral", 
    D: "Drive"
}

是否有一个jQuery方法直接生成这个对象 - 而不是迭代外部提供的对象？

Answer 1

不，没有这样的jQuery函数可以为你提供一个对象而不是一个数组。不过，自己写一个会很简单。这只是一个关于你已经编写的内容并将其封装在jQuery函数中的问题：

$.fn.mapToObject = function (callback) {
    var output = {};

    this.each(function (index, element) {
        var toAdd = callback.call(this, index, element);
        output[toAdd.key] = toAdd.value;
    });

    return output;
};

...然后你可以这样打电话：

var lookup = $('#carMenu>option').mapToObject(function (index, element) {
    return {
        key: this.value,
        value: this.innerHTML
    };
});

http://jsfiddle.net/mattball/nQXL2

Answer 2

map不是您想要实现的目标的正确功能，我不认为jQuery提供了一种方法。但是，您可以轻松地创建自己的函数作为jQuery插件。

http://jsfiddle.net/scarsick/qG5Dc/1/（以你的例子为准）

function makeMap(o, fn) {
    var map = {}, r;

    if (typeof o.length === 'number') {
        for (var i = 0, len = o.length; i < len; i++) {
            map[(r = fn(i, o[i]))[0]] = r[1];
        }
        return map;
    }

    for (var k in o) {
        if (o.hasOwnProperty(k)) {
            map[(r = fn(k, o[k]))[0]] = r[1];
        }
    }

    return map;
}

array

var map = makeMap([1, 2, 3, 4], function (i, v) { return ['item' + i, v]; });
console.log(map); // {item0: 1, item1: 2, item2: 3, item3: 4}

使用jQuery对象

HTML

<ul>
    <li>first item</li>
    <li>second item</li>
    <li>third item</li>
</ul>

JS

var map = makeMap($('ul li'), function (i, v) {
    return ['li' + i, v.innerHTML];
});

console.log(map); // {li0: "first item", li1: "second item", li2: "third item"}

使用普通object

var map = makeMap({prop1: 'test', prop2: 'test'}, function (k, v) {
    return [k.toUpperCase(), v];
});
console.log(map); // {PROP1: "test", PROP2: "test"}

返回html选择菜单的查找表

2 个答案: