Как правильно поменять jQuery replaceWith на функцию стрелки?

Question

Это текущий устаревший код

$('#container input[type="number"], #container input[type="text"]').replaceWith(function () {
    return $(`<p class="readonly" id="${$(this).prop('id')}">${$(this).val()}</p>`).append($(this).contents());
});

Мне нужно провести некоторую очистку и рефакторинг, и я надеялся его модернизировать, но replaceWith, похоже, не имеет аргумента, который я мог бы использовать для замены 'this' в тех местах, где мы его используем, например, $ (this) .prop. Я думал, что это должен быть event.currentTarget, но это не сработало (или, возможно, моя реализация была неправильной)

Answer 1

Можете ли вы сделать это с помощью стрелок? Да-я sh. Метод, который вы используете replaceWith, не предоставляет элемент, который вы хотите заменить, но он дает вам индекс. Итак, помня об этом, если у вас просто есть для использования функций стрелок по любой причине, вы можете использовать этот индекс для получения вашего элемента.

const $inputs = $('input');

$inputs.replaceWith( index => {
  let input = $inputs[ index ];
  
  return `<p class="readonly" id="${input.id}">${input.value}</p>`;
} );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="input1" value="Value 1">
<input type="text" id="input2" value="Value 2">
<input type="text" id="input3" value="Value 3">

По моему личному мнению, в этом случае нет смысла переключаться на функции стрелок, но это можно сделать.

Answer 2

replaceWith, похоже, не имеет аргумента, который я могу использовать для замены 'this'

Это не так.

Документация показывает, что функции не переданы никакие аргументы.

Функции стрелок здесь просто не подходят для использования. Они никогда не создавались как универсальная замена для объявлений функций или выражений.