javascript - 使用 JQuery 重新填充 列表时 IE7 中的错误 : elements appearing below the previously hidden elements

Question

在下面的 javascript 脚本中，我使用以下代码清空 <ul>国家列表并重新填充它(使用 jquery 的 hide() 函数添加一些动画)。

它适用于 chrome 和 safari，但在 IE 中，新的 <li> <ul> 的元素出现在先前显示的位置 <li> 的后面的 .有解决方法吗？

        $('#country_list').hide(300,function(){
            var i;
            $(".country_list").empty();
            $(".country_list").height(0);
            $(".country_link").remove();
            $("#content").append('<div id="country_list_div" class="grid_3 "><ul id="country_list"></ul></div>');
            var country_list= country_dict[letter];
            var country_count = country_list.length;
            for (i=0;i<country_count;i++)
            {
                $("#country_list").append('<li><a class="country_link" href="" id="'+country_list[i][0]+'" na="'+country_list[i][1]+'">'+country_list[i][1]+"</a></li>");
            }

            $('#country_list').show(300);
            return false;
        });

这是相应的 html，按照要求(您也可以在 http://populationpyramid.net 看到整个内容)

       <div id="content" class="container_12">
        <div id="canvas_container_div" class="grid_7 " >
            <div id="canvas_container" ></div>
        </div>

        <div id="year_list_div" class="grid_1 " style="display: table-cell; vertical-align: middle;">
            <ul id="year_list">
            </ul>
        </div>

        <div id="alpha_list_div" class="grid_1 ">
            <div style="margin-left:11px;">
            <ul id="alpha_list">
            </ul>
            </div>
        </div>

        <div id="country_list_div" class="grid_3 ">
            <ul id="country_list">

            </ul>
        </div>
    </div>

Answer 1

为什么要去掉原来的ul？您还要删除“.country_list”而不是“#country_list”

也许...

$"#country_list").hide(300, function(){

  var cl = $(this); //get a variable handle
  cl.empty();
  var items = country_dict[letter];

  for (var i=0 i<items.length; i++) {
    cl.append(([
      '<li>'
        ,'<a class="country_link" href="javascript:void(0);"'
          ,' id="' + items[i][0] +'"'
          ,' na="' + items[i][1] + '"'
        ,'>'
          ,items[i][1]
        ,'</a>'
      ,'</li>'
    ]).join(''));
  }

  cl.show(300);

});