从循环创建对象答案

【问题标题】：Creating an object from a loop从循环创建对象
【发布时间】：2012-11-29 01:10:11
【问题描述】：

从循环中添加对象时，我在以正确格式创建对象时遇到问题。

例如我遍历了一些列表

<ul class="pdmenu">
    <ul class="pdmenu">
    <li class="menu-top" id="vmen-1"><a href="#">1</a></li>
    <li class="menu-item"><a href="#">aaa</a></li>
</ul>

<ul class="pdmenu">
    <li class="menu-top" id="vmen-2"><a href="#">2</a></li>
    <li class="menu-item"><a href="#">aaa</a></li>
    <li class="menu-item"><a href="#">bbb</a></li>
</ul>

<ul class="pdmenu">
    <li class="menu-top" id="vmen-3"><a href="#">3</a></li>
    <li class="menu-item"><a href="#">aaa</a></li>
    <li class="menu-item"><a href="#">bbb</a></li>
</ul>

我使用 jQuery 循环遍历顶部列表项 .menu-top，并将 id 和可见性推送到对象。

jsonmenu = $();  // Set empty object.

$('.menu-top').each(function(index) {                   
    jsonmenu.push({ 
        menu: $(this).attr('id'), 
        visible: "" + $(this).next().is(':visible') + ""
    });
});

这会像这样为每个项目创建带有成员的对象

{
    "0": {
        "menu":"vmen-1",
        "visible":"false"
    },
    "length":4,
    "1": {
        "menu":"vmen-2",
        "visible":"false"
    },
    "2":{
        "menu":"vmen-3",
        "visible":"false"
    },
    "3": {
        "menu":"vmen-4",
        "visible":"true"
    }
}

我只需要一个简单的格式，如下所示；

{
    "menu":"vmen-1",
    "visible":"false" 
},
{
    "menu":"vmen-2",
    "visible":"false"
},
{
    "menu":"vmen-3",
    "visible":"false"
},
{
    "menu":"vmen-4",
    "visible":"true"
}

如何更改它以获取这种简单格式的对象？

【问题讨论】：

你可以使用 jsonmenu=[] 而不是 jsonmenu=$()
仅供参考，您所拥有的是object - 与 json 无关。为了避免混淆，我稍微修改了你的术语。
$() 创建一个 jQuery 实例，绝对不适合序列化。你为什么用它？

标签： javascript jquery json jquery-plugins

【解决方案1】：

使用原生数组而不是 JSON 对象来保存您的值：

var jsonmenu = [];

$('.menu-top').each(function(index) {                   
  jsonmenu.push({menu: $(this).attr('id'), visible: ""+$(this).next().is(':visible')});
});

或者，因为你刚刚得到了类似键值对的东西，你可以这样做：

var jsonmenu = {};

$('.menu-top').each(function(index) {                   
  jsonmenu[ $(this).attr('id') ] = $(this).next().is(':visible');
});

这会导致这样的事情：

{ 
  'vmen-1': false, 
  'vmen-2': false,
  ...
}

【讨论】：

【解决方案2】：

您已经有了答案，使用原生数组而不是空的 jQuery 对象。但是，为了完整起见，jQuery 中还有另一种方便的方法来执行诸如“枚举一堆 DOM 元素并将它们转换为数组”之类的操作.map()

你会这样使用它：

var jsonmenu = $('.menu-top').map(function(i,e) {                   
    var $this = $(e);
    return {
        id: $this.attr('id'),
        visible: "" + $this.next().is(':visible') + ""
    }
});

现场示例：http://jsfiddle.net/8szrG/

【讨论】：

谢谢这也很有用