使用 AJAX Json 数组结果更新 DIV 类

Question

我有一个由 DOM 中的 Div 组成的 Ajax Json 数组结果。我想用新的 Ajax Json 结果更新现有的 DOM 数据。 DOM 数据和 Ajax 数据都有一个可用于匹配的 id 号。我曾经在 div 中包含表单，因此很容易更新，因为我所要做的就是使用 $(this) 或 $(this)closest。现在我已将 Ajax Get 表单移到 Div 之外 $(this) 或 $(this)closest 不起作用。

我还需要一种方法来关联数据，然后根据 id 或您可以推荐的任何内容应用数据。谢谢你。以下是我到目前为止所到之处。下面的 Ajax 结果新数据显示 id:2 姓氏为 Heals 的人。在下面的 DOM div 中是 Bond。简而言之，用其更新数据更新每条记录。

<form  class="updateform"  action="" method="">    
<input type="hidden" class ="customers"  name="" value="<?php echo $mycustomers; ?>">
<a class="update-button"></a>
</form> 

var Ajaxresultdata = [
 {id:1,name:"Mike",surname:"Rynes"},
 {id:2,name:"James",surname:"Heals"},
 {id:3,name:"Helen",surname:"Wright"}
 ];

Div 行是 json 数组结果

<div class="mycustomers">
<div id="1">
    <div class="name">Mike </div>
    <div class="surname">Rynes</div>
</div>
<div id="2">
    <div class="name">James</div>
    <div class="surname">Bond</div>
</div>
<div id="3">
    <div class="name">Helen</div>
    <div class="surname">Wright</div> 
</div>

<script>
    var Ajaxresultdata = [
       { id: 1, name: "Mike", surname: "Rynes" },
       { id: 2, name: "James", surname: "Heals" },
       { id: 3, name: "Helen", surname: "Wright" }
   ];

   $.each(ajaxresultdata, function(i, person ) {
    
       if (document.getElementById(String(i)) {
           $("#" + String(i)).find('.surname').html(person.surname);
       }
    });

</script>

Answer 1

你在找这个吗？

   $.each(Ajaxresultdata, function( i, person ) {
     $("#"+person.id).html(person.surname);
   });

check on codepen