附加的Jquery JSON <li>无法获得长度</li>

时间:2012-11-05 13:36:43

标签: jquery json append

我已经查了很多网站和线程,但找不到我的问题的答案。

我的JSON看起来像这样:

{
    "Pizza Margharita": {
        "price1": "4,50 &euro;"
    },
    "Pizza Caprese ": {
        "price1": "4,00 &euro;"
    }    
}

我的jquery函数是这样的:

  $(function() {
    $.getJSON('data/food01.json', function(data) {
      $.each(data, function(name, price) {
        $('section#food01').find('ul').append('&lt;li&gt;&lt;a href="#order"&gt;&lt;h3&gt;'+name+'&lt;/h3&gt;&lt;span&gt;'+price.price1+'&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;');
      });

    });
    var food01size = $('#food01 ul li a').length;
    $('#food01 li a').live('click',function(){
      alert(food01size);

    });
  });

我需要获得li或元素的.length。 foodsize01的值始终为“0”。那是因为数据是异步加载的。

有人想出了什么问题吗?

2 个答案:

答案 0 :(得分:1)

正如您所说,问题是因为您异步加载数据。计数在添加任何元素之前触发。您需要将该代码移动到成功回调函数中:

  $(function() {
    $.getJSON('data/food01.json', function(data) {
      $.each(data, function(name, price) {
        $('section#food01').find('ul').append('&lt;li&gt;&lt;a href="#order"&gt;&lt;h3&gt;'+name+'&lt;/h3&gt;&lt;span&gt;'+price.price1+'&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;');
      });
      var food01size = $('#food01 ul li a').length;
      $('#food01 li a').live('click',function(){
        alert(food01size);
      });
    });
  });

答案 1 :(得分:0)

将food01size声明为0,然后将其设置在getJSON的完整函数中:

  $(function() {
    var food01size = 0; //original declaration
    $.getJSON('data/food01.json', function(data) {
      $.each(data, function(name, price) {
        $('section#food01').find('ul').append('&lt;li&gt;&lt;a href="#order"&gt;&lt;h3&gt;'+name+'&lt;/h3&gt;&lt;span&gt;'+price.price1+'&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;');
      });
      food01size = $('#food01 ul li a').length;//set new value
    });
    $('#food01 li a').live('click',function(){
      alert(food01size);
    });
  });