Блог

Главная - Вопросы по программированию - jQuery преобразует один элемент в другой

jQuery преобразует один элемент в другой

#javascript #jquery

#javascript #jquery

Вопрос:

У меня есть элемент div, как показано ниже;

 <div class="editableTxt" data-model-attr="myAttr" data-model-id="302">VALUE</div>

Я хочу, чтобы он был преобразован в

 <input class="editBox" data-model-attr="myAttr" data-model-id="302" value="VALUE" />

Есть ли общий способ сделать то же самое?

Предположим, что я нахожусь внутри обратного вызова amp; $(this) представляет элемент div..

Комментарии:

1. Вы не можете изменить HTML?

Ответ №1:

Попробуйте

 $('.editableTxt').each(function () {
    var $input = $('<input/>').val($.trim(this.innerHTML));
    $.each(this.attributes, function (i, attr) {
        $input.attr(attr.name, attr.value);
    });
    $(this).replaceWith($input)
})

Демонстрация: скрипка

Ответ №2:

Попробуйте это: предполагая $(this) , что <div class="editableTxt" data-model-attr="myAttr" data-model-id="302">VALUE</div> 

 $input = $('<input/>');
$input.attr('class',$(this).attr('class'));
$input.attr('data-model-attr',$(this).attr('data-model-attr'));
$input.attr('data-model-id',$(this).attr('data-model-id'));
$input.val($(this).text());

Ответ №3:

 $(this).attr('class', 'editBox').val('VALUE');

Ответ №4:

Попробуйте это:

 $(this).addClass("editBox").removeClass("editableTxt").attr("value", $(this).html()).html("");
Метки: