jQuery replaceWith() 回调函数更新内容答案

【问题标题】：jQuery replaceWith() callback function to update thingsjQuery replaceWith() 回调函数更新内容
【发布时间】：2020-04-19 16:27:48
【问题描述】：

我正在使用 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() 完成后使用更新数据属性值、删除类、添加类等方法。

那么有人可以告诉我有什么方法可以做到这一点吗？任何帮助和建议都将是非常可观的。谢谢

【问题讨论】：

"改变数据属性值"你想改变哪个元素的数据？
@Nick 对此感到抱歉。我已经接受了答案，谢谢。
@Nick 实际上我接受的解决方案运行良好，没有任何问题，但我忘记接受了。但无论如何我已经接受了答案。
以下答案是否能解决您的问题？请标记一个为正确答案

标签： javascript jquery ajax replacewith

【解决方案1】：

你可以这样解决。

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>

【讨论】：

@NewUser 如果这是一个正确答案，您可以将此答案标记为正确以供将来阅读。

【解决方案2】：

您可以在replaceWith 中创建一个jQuery 对象，执行操作并返回它。对嵌套元素使用.find()：

$( 'ul.custom-contents' ).find( 'li.updated' ).replaceWith( fucntion(){
   let obj = $(UpdatedItem)   
   obj.addClass("..")
   obj.data("cart-key", "..")
   obj.data("item-name", "..")
   obj.removeClass("..")

   //Find <a> with class "edit-cart-item"
   obj.find("a.edit-cart-item").addClass(...)
   obj.find("a.edit-cart-item").data("item-name", "..")
   return obj;
});

【讨论】：

感谢您的回答，但如果有嵌套的 html，那么它不适用于带有类名的查找。
问题中的任何地方都没有提到嵌套元素。请张贴所有信息。
@NewUser 至少在您的帖子中解释什么不起作用？就像您尝试过的一样，但结果却没有达到您的预期？只是说不工作在上下文中是如此微不足道。
@NewUser 也不要忘记慷慨点赞 :)