从循环创建对象

时间:2012-12-11 13:00:45

标签: javascript jquery json jquery-plugins

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

e.g。我循环浏览一些列表

<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"
}

如何更改此设置以获取此简单格式的对象?

2 个答案:

答案 0 :(得分: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,
  ...
}

答案 1 :(得分:0)

您已经有了答案,使用本机数组而不是空的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/