태그 바꾸기 : unwrap() 그리고 wrap()

태그 바꾸기 : unwrap() 그리고 wrap()

$(바꿔야할 태그).contents().unwrap().wrap('바뀌어야할 태그');


장점.

<div class="col-xs-12" id="object">태그 바꾸기</div>
라는 태그를 <input> 태그로 바꾼다는 가정을 두면

<input type="text" class="col-xs-12" id="object" value=""></input>

으로 쉽게 교체 가능하다.


ex) $('div#object').contents().unwrap().wrap('<input type="text" class="col-xs-12" id="object" value=""></input>');


단점.

태그를 바꾸기 위해 태그 안의 컨텐츠를 중심으로 두어야 한다.

무언가 태그를 바꾸기 위해서 주체가 필요했기 때문에 태그 안에 둔 컨텐츠를 주체로 둔 것인데

input의 경우 태그를 마무리 짓는 경우가 드물고,

태그 사이에 컨텐츠를 쓰기보단 value 안의 컨텐츠를 추로 쓰기 때문에

일반 태그를 input 태그로 교체시

컨텐츠를 지워줄 필요가 발생한다.


그래서 아래와 같은 응용하였다.




<i class="modify" data-name="modify" title="수정">수정</i>

<i class="save hidden" data-name="save" title="저장">저장</i>


<div class="form-control input-sm required" id="pt_company_name" title="학원명 수정불가"><?php echo $ac['pt_company_name'];?></div>

<div class="form-control input-sm required" id="pt_name" title="대표자 수정불가"><?php echo $ac['pt_name'];?></div>

$('.panel-title>div>i').on('click',function(){
  var a = 'div.panel-heading';
  var b = $(this);
  var c = $(this).data('name');
  var d = b.closest(a).next('div').children('div').attr('id');
  var e = "";
  switch (c){
    case 'modify':
      e = $('#'+d).find('div.form-control');
      e.each(function(index, item){
        var f = $(item).attr('class');
        var g = $(item).attr('id');
        var h = $(item).html();
        $(item).contents().unwrap().wrap('<input type="text" class="'+f+'" name="'+g+'" id="'+g+'" value="'+h+'"><input>');
      });
      b.addClass('hidden').next('i').removeClass('hidden');
      break;


    case 'save':
      e = $('#'+d).find('input.form-control');
      e.each(function(index, item){
        var f = $(item).attr('class');
        var g = $(item).attr('id');
        var h = $(item).val();
        $(item).html(h);
        $(item).contents().unwrap().wrap('<div class="'+f+'" id="'+g+'"></div>');
      });
      b.addClass('hidden').prev('i').removeClass('hidden');
      break;
  }
});

Facebook Twitter GooglePlus KakaoStory KakaoTalk NaverBand