1

假设在 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 方法可以直接生成这个对象——而不是迭代外部提供的对象？

4

2 回答 2

1

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"}
于 2013-04-16T00:26:48.963 回答
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

于 2013-04-16T00:10:42.630 回答