Question

我们有这些文件：的 action.php的

<?php

$array = array(
    0 => 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

<html>
    <head>
        <title>Test</title>
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/main.js"></script>
    </head>
    <body>
        <div id="res-list">
            <div class="response" id="1">
                Name: <span class="name">Sample</span><br>
                Password: <span class="password">Test</span><br>
            </div>
        </div>
    </body>
</html>

和我们的 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

中输出<div class="response"></div>的每个元素

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

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');

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

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

Answer 2

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

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

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

2 个答案: