我正在使用jQuery replace With((方法来替换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>您可以在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;
});