使用ajax将结果附加到ul标记中

时间:2015-10-26 08:03:49

标签: javascript jquery html ajax

此代码在li中附加了1个或多个ul,但每次运行代码时,它都会继续追加。 我想第一次用新数据替换附加数据。我尝试使用.empty,但如果数据包含多个li标记,则只会在清除第一次迭代时返回最后一个li

function addCourse(){
                    $.post("addCourse", function(result){
                    var response = $.parseJSON(result);
                          $.each( response, function( i, val ) {
                                var day = JSON.stringify(val.day).replace(/\"/g, "");
                                var hour = JSON.stringify(val.hour).replace(/\"/g, "");
                                var date = day+"_"+hour;
                            $("#div1").append("<li><a data-toggle='tab' href=#"+date+">"+date+"</a></li>");
                           });
                });
            }

HTML代码

<ul class="nav nav-tabs" id="div1" role="tablist" >
      <li class="active" id="home">
          <a data-toggle="tab" href="#Home" >Home</a>
      </li>
</ul>

2 个答案:

答案 0 :(得分:0)

您尝试使用.empty,但可能在错误的地方。尝试在$.each之前使用它,例如:

function addCourse() {
  $.post("addCourse", function(result) {
    var response = $.parseJSON(result);
    $("#div1").empty();
    $.each(response, function(i, val) {
      var day = JSON.stringify(val.day).replace(/\"/g, "");
      var hour = JSON.stringify(val.hour).replace(/\"/g, "");
      var date = day + "_" + hour;
      $("#div1").append("<li><a data-toggle='tab' href=#" + date + ">" + date + "</a></li>");
    });
  });
}

答案 1 :(得分:0)

尝试使用.html()

$("#div1").html("<li><a data-toggle='tab' href=#"+date+">"+date+"</a></li>");

$("#div1").html('');然后$("#div1").append('...');