如何在 php 中 ajax 成功更新子 div 元素

How to update the child div element on ajax success in php

我想更新子 div,但所有 div 都在 ajax 成功后更新。

我的html

<div class="add_wishlist">
<input type="hidden" name="prd_wishlist" class="prd_wishlist" value="1">
     <div class="wishlist_icon">
       <p><i class="far fa-heart"></i></p>
     </div>
</div>
<div class="add_wishlist">
<input type="hidden" name="prd_wishlist" class="prd_wishlist" value="2">
     <div class="wishlist_icon">
       <p><i class="far fa-heart"></i></p>
     </div>
</div>

Jquery

$('.add_wishlist').click(function(){

var prd_wish = $(this).find("[name='prd_wishlist']").val()

$.ajax({
    type: 'post',
    url: weburl+'pages/login-script.php',
    data: {
        prd_wish:prd_wish,
        wishlist_submit:'submit',
    },
    success: function (response) {
        
        $('.add_wishlist').children('.wishlist_icon').html(response)
    }
});
})

我也尝试用 $('.add_wishlist').children('.wishlist_icon').html(response) 更新代码,但它不起作用。

在点击处理程序中存储对点击的 .add_wishlist 元素的引用,然后在 success 处理程序中使用它:

$('.add_wishlist').click(function() {
  let $addWishlist = $(this);
  let prd_wish = $addWishlist.find("[name='prd_wishlist']").val()

  $.ajax({
    type: 'post',
    url: weburl + 'pages/login-script.php',
    data: {
      prd_wish: prd_wish,
      wishlist_submit: 'submit',
    },
    success: function(response) {
      $addWishlist.children('.wishlist_icon').html(response);
    }
  });
})