jquery - 附加了 Jquery JSON无法获得长度

Question

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

我的 JSON 看起来像这样：

{
    "Pizza Margharita": {
        "price1": "4,50 €"
    },
    "Pizza Caprese ": {
        "price1": "4,00 €"
    }    
}

我的 jquery 函数是这样的：

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

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

    });
  });

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

有人知道有什么问题吗？

Answer 1

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

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

Answer 2

将 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('<li><a href="#order"><h3>'+name+'</h3><span>'+price.price1+'</span></a></li>');
      });
      food01size = $('#food01 ul li a').length;//set new value
    });
    $('#food01 li a').live('click',function(){
      alert(food01size);
    });
  });