使用JSON和AJAX的奇怪循环行为

我们有这些文件： Action.php

 array( 'id' => "2", 'name' => "Start", 'password' => "start" ), 1 => array( 'id' => "3", 'name' => "Med", 'password' => 'med' ), 2 => array( 'id' => "4", 'name' => "Last", 'password' => 'last' ) ); echo json_encode($array); ?> 

的index.php

        
 
 Name: Sample
 Password: Test
 
 
   

和我们的main.js

 $(document).ready(function(){ $.ajax({ type: "POST", url: 'action.php', dataType: 'json', success: function(msg){ $.each(msg, function(index, value){ $('.response').clone().attr('id', value.id).appendTo('#res-list'); $('#'+ value.id +' .name').html(value.name); $('#'+ value.id +' .password').html(value.password); }); }, error: function(){ $('.response').html("An error occurred"); } }); }); 

基本上我想在另一个

输出$array每个元素

它似乎部分有效。 但不是输出：

 Name: Sample Password: Test Name: Start Password: start Name: Med Password: med Name: Last Password: last 

它输出

 Name: Sample Password: Test Name: Start Password: start Name: Med Password: med Name: Start Password: start Name: Last Password: last Name: Start Password: start Name: Med Password: med Name: Start Password: start 

Answer 1

当你这样做时，我觉得：

  $('.response').clone().attr('id', value.id).appendTo('#res-list'); 

使用类“response”克隆所有

元素。 也许您应该给第一个单独的类（或“id”值），以便您可以专门定位它，并确保其他类没有该类。 您当然可以从克隆的类中删除类“响应”：

  $('.response').clone().attr('id', value.id).removeClass('response').appendTo('#res-list'); 

Answer 2

当您克隆“响应”时，您正在克隆包括类在内的所有内容，因此选择器’.response’在您第一次追加后会匹配2个元素。 所以第二次通过数组，你会追加2个新项目，第三次，你附加4个。

要更正此问题，请在克隆元素上调用.removeClass（’response’）。