用jquery的replaceWith方法做页面加载内容切换

首先页面的内容是：

   <input  value="{$vo.type}" data-url="{:url('BaseConfig/editPost', ['id' => $vo['id']])}"  data-type="type"  type="text" id="toggle_type">

想转换成的内容是：

<div class="toggle-input" data-url="{:url('BaseConfig/editPost', ['id' => $vo['id']])}"  data-type="type">
<span>{$vo.type}</span>
<input value="{$vo.type}" class="settings-item form-control" style="display: none;" type="text">
</div>

用jquery的replaceWith方法实现转换

$(document).ready(function () {
        var length = $("[id^='toggle']").length;
        for (var i = 0; i < length; i++) {
            var val = $("[id^='toggle']:eq('" + i + "')").val();
            if (val == null || val == undefined || val == "") {
                 val = '&nbsp;';
            }

            var dataType = $("[id^='toggle']:eq('" + i + "')").attr('data-type');
            var dataUrl = $("[id^='toggle']:eq('" + i + "')").attr('data-url');
            $("[id^='toggle']:eq('" + i + "')").replaceWith("  <div class='toggle-input' data-url='" + dataUrl + "' data-type='" + dataType + "'>" + "<span>" + val + "</span>"
                + "<input id='toggle' type='text' class='settings-item form-control form-control-sm' style='display: none' value='" + val + "'>"
                + "</div>");
        }
    });

页面的内容要改的内容同上

<input style="display: none;" value="{$vo.type}" data-url="{:url('BaseConfig/editPost', ['id' => $vo['id']])}"  data-type="type"  type="text" class="settings-item form-control form-control-sm toggle-input">

//进一步改进的

    $(document).ready(function () {
        $('.toggle-input').each(function () {
            var val = $(this).val();
            if (val == '' || val == undefined || val == null) {
                val = ' ';
            }
            var wrap = $("<div class='toggle-input'><span>" + val + "</span></div>");
            $(this).before(wrap).appendTo(wrap);
        });
        $('input.toggle-input').each(function () {
            $(this).removeClass('toggle-input');
        });
    });