$ .each中的函数仅对第一个JSON对象执行

时间:2013-08-13 12:09:55

标签: jquery json iteration each

我有一些JSON,例如

Levels = {
    "1" : {
        "level"   : 1,
        "name"    : "blah blah",
        "TTtitle" : "blah blah blah blah"
    },
    "2" : {
        "level"   : 2,
        "name"    : "blah blah",
        "TTtitle" : "blah blah blah blah"
    }
};

当我在每个循环中声明一个函数时,它只在第一个函数上执行,例如

var addIcons;    
$.each(Levels, function(key, value){
       v = value,
       addIcons = function(){                                               
         $(
           '<li class="icon' + key + '">'+                                              
           '<a class="Tip" href="#' + key + '" title="' + v.TTtitle +'"></a>'+
           '</li>'
          ).appendTo('ul');                                     
       }
    });
addIcons();

在循环中声明函数不是一个好主意吗?

如何为每个“级别”启用该功能?

这只是我正在测试的一些代码的一个例子,因为我在单独的函数中使用了5个单独的每个循环,并且正在寻找一种只迭代JSON一次并设置函数的方法。 / strong>

2 个答案:

答案 0 :(得分:1)

应该是

$.each(Levels, function(key, value){
    var v = value;
    $('<li class="icon' + key + '">' +                                              
      '<a class="Tip" href="#' + key + '" title="' + v.TTtitle + '">t</a>' +
      '</li>').appendTo('ul');                                     
});

演示:Fiddle

但是如果你想创建一个函数列表并在以后执行它们,那么试试

var addIcons = [];    
$.each(Levels, function(key, value){
    var v = value;

    addIcons.push(function(){                                               
        $(
            '<li class="icon' + key + '">'+                                              
            '<a class="Tip" href="#' + key + '" title="' + v.TTtitle +'"></a>'+
            '</li>'
        ).appendTo('ul');                                     
    })
});

$.each(addIcons, function(idx, fn){
    fn();
})

演示:Fiddle

答案 1 :(得分:0)

you can write as follows
$.each(Levels, function(key, value){
   v = value,
     $('ul').append(
       '<li class="icon' + key + '">'+                                              
       '<a class="Tip" href="#' + key + '" title="' + v.TTtitle +'"></a>'+
       '</li>'
      );                                     
});