javascript - jQuery ReplaceWith() 回调函数来更新内容

标签 javascript jquery ajax replacewith

我正在使用 jQuery ReplaceWith() 方法来替换 html 中的一些内容。它工作正常。但我想在完成replaceWith()后更改数据属性值。

所以基本上我是从我的ajax响应中得到这个

UpdatedItem = '<li data-cart-key="XXX" data-item-name="Test" data-item-price="$111.00" data-item-key="XXX"><span class="cart-action-wrap"><a class="edit-cart-item" data-cart-item="XXX" data-cart-key="XXX" data-cart-action="edit">Edit</a><a class="remove-cart-item" data-cart-item="XXX" data-cart-key="XXX" data-cart-action="remove">Remove</a></span></li>';

现在我在这里使用replaceWith(),如下所示

$( 'ul.custom-contents' ).find( 'li.updated' ).replaceWith( UpdatedItem );

这里我想使用更新数据属性值、删除类、在replaceWith()完成后添加类等方法。

那么有人可以告诉我有什么办法可以做到这一点吗?任何帮助和建议都将非常感激。谢谢

最佳答案

可以这样解决。

UpdatedItem =
  '<li data-cart-key="" data-item-name="Test" data-item-price="$111.00" data-item-key="XXX">updated</li>';
divElement = document.createElement("div");
divElement.innerHTML = UpdatedItem;
element = divElement.firstElementChild;
$("ul.custom-contents").find("li.updated").replaceWith(element);

element.setAttribute("data-item-name", "myValue");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>

<body>


  <ul class="custom-contents">
    <li class="updated">old</li>
    <li class="">old</li>
    <li class="">old</li>
  </ul>


  <script src="app.js"></script>
</body>

</html>

关于javascript - jQuery ReplaceWith() 回调函数来更新内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61301228/

相关文章:

javascript - Pinterest 和 bootstrap 选项卡

javascript - 根据用户从下拉列表中的选择显示多个文本框

java - 支柱 1.1 : ActionErrors between different Actions

javascript - 分别使用 jQuery 将 jQuery 悬停应用于多个元素

php - Jquery ajax setTimeout 表单成功后不重定向?

javascript - 在 perl CGI 中分割 AJAX 响应?

javascript - 如何根据条件渲染 JSX?

javascript - javascript 变量中隐藏的输入类型

jQuery ui 菜单图标(用于子菜单)不可见

javascript - 拆分文本以最小化宽度,同时受 div 上的高度限制