jQuery функция обратного вызова replaceWith () для обновления - PullRequest
Новая
       3

jQuery функция обратного вызова replaceWith () для обновления

0 голосов
/ 19 апреля 2020

Я использую метод 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 () была выполнена.

Так может кто-нибудь сказать мне, есть ли способ сделать это? Любая помощь и предложения будут действительно заметны. Спасибо

Ответы [ 2 ]

1 голос
/ 19 апреля 2020

Вы можете решить, как это. 

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>
0 голосов
/ 19 апреля 2020

Вы можете создать jQuery объект внутри replaceWith, выполнить операции и вернуть его. Используйте .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;
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...