[JQUERY] jQuery를 사용하여 요소 유형을 변경하는 방법

jQuery를 사용하여 요소 유형을 변경하는 방법

해결법

1. ---

   1.다음은 jQuery를 함께 할 수있는 하나 개의 방법이있다 :

   다음은 jQuery를 함께 할 수있는 하나 개의 방법이있다 :

   var attrs = { };
   
   $.each($("b")[0].attributes, function(idx, attr) {
       attrs[attr.nodeName] = attr.nodeValue;
   });
   
   
   $("b").replaceWith(function () {
       return $("<h1 />", attrs).append($(this).contents());
   });
   

   예 : http://jsfiddle.net/yapHk/

   업데이트, 여기에 플러그인입니다 :

   (function($) {
       $.fn.changeElementType = function(newType) {
           var attrs = {};
   
           $.each(this[0].attributes, function(idx, attr) {
               attrs[attr.nodeName] = attr.nodeValue;
           });
   
           this.replaceWith(function() {
               return $("<" + newType + "/>", attrs).append($(this).contents());
           });
       };
   })(jQuery);
   

   예 : http://jsfiddle.net/mmNNJ/

2. ---

   2.jQuery를 확실하지. 일반 자바 스크립트로 당신은 할 수 있습니다 :

   jQuery를 확실하지. 일반 자바 스크립트로 당신은 할 수 있습니다 :

   var new_element = document.createElement('h1'),
       old_attributes = element.attributes,
       new_attributes = new_element.attributes;
   
   // copy attributes
   for(var i = 0, len = old_attributes.length; i < len; i++) {
       new_attributes.setNamedItem(old_attributes.item(i).cloneNode());
   }
   
   // copy child nodes
   do {
       new_element.appendChild(element.firstChild);
   } 
   while(element.firstChild);
   
   // replace element
   element.parentNode.replaceChild(new_element, element);
   

   데모

   이 그래도 얼마나 크로스 브라우저 호환 확실하지.

   변형이 될 수있다 :

   for(var i = 0, len = old_attributes.length; i < len; i++) {
       new_element.setAttribute(old_attributes[i].name, old_attributes[i].value);
   }
   

   자세한 내용 Node.attributes [MDN]을 참조.

3. ---

   3.@jakov와 앤드류 휘태커

   @jakov와 앤드류 휘태커

   여기 한번에 여러 요소를 처리 할 수 ​​있도록 추가의 개선이다.

   $.fn.changeElementType = function(newType) {
       var newElements = [];
   
       $(this).each(function() {
           var attrs = {};
   
           $.each(this.attributes, function(idx, attr) {
               attrs[attr.nodeName] = attr.nodeValue;
           });
   
           var newElement = $("<" + newType + "/>", attrs).append($(this).contents());
   
           $(this).replaceWith(newElement);
   
           newElements.push(newElement);
       });
   
       return $(newElements);
   };
   

4. ---

   4.Jazzbo의 답변 @ 체인 가능하지 않았다 jQuery를 오브젝트의 배열을 포함하는 객체를 jQuery를 반환. 나는 그래서 $ .each 돌아왔다 것이 무엇에 더 유사한 개체를 반환을 변경했습니다 :

   Jazzbo의 답변 @ 체인 가능하지 않았다 jQuery를 오브젝트의 배열을 포함하는 객체를 jQuery를 반환. 나는 그래서 $ .each 돌아왔다 것이 무엇에 더 유사한 개체를 반환을 변경했습니다 :

       $.fn.changeElementType = function (newType) {
           var newElements,
               attrs,
               newElement;
   
           this.each(function () {
               attrs = {};
   
               $.each(this.attributes, function () {
                   attrs[this.nodeName] = this.nodeValue;
               });
   
               newElement = $("<" + newType + "/>", attrs).append($(this).contents());
   
               $(this).replaceWith(newElement);
   
               if (!newElements) {
                   newElements = newElement;
               } else {
                   $.merge(newElements, newElement);
               }
           });
   
           return $(newElements);
       };
   

   (가 jslint를 통과 있도록 또한 일부 코드 정리를했다.)

5. ---

   5.내가 생각할 수있는 유일한 방법은 이상 수동으로 모든 것을 복사하는 것입니다 : 예 jsfiddle

   내가 생각할 수있는 유일한 방법은 이상 수동으로 모든 것을 복사하는 것입니다 : 예 jsfiddle

   HTML

   <b class="xyzxterms" style="cursor: default; ">bryant keil bio</b>
   

   jQuery를 / 자바 스크립트

   $(document).ready(function() {
       var me = $("b");
       var newMe = $("<h1>");
       for(var i=0; i<me[0].attributes.length; i++) {
           var myAttr = me[0].attributes[i].nodeName;
           var myAttrVal = me[0].attributes[i].nodeValue;
           newMe.attr(myAttr, myAttrVal);
       }
       newMe.html(me.html());
       me.replaceWith(newMe);
   });
   

6. ---

   6.앤드류 휘태커 :이 변화를 제안한다 :

   앤드류 휘태커 :이 변화를 제안한다 :

   $.fn.changeElementType = function(newType) {
       var attrs = {};
   
       $.each(this[0].attributes, function(idx, attr) {
           attrs[attr.nodeName] = attr.nodeValue;
       });
   
       var newelement = $("<" + newType + "/>", attrs).append($(this).contents());
       this.replaceWith(newelement);
       return newelement;
   };
   

   그런 다음 같은 것들을 수행 할 수 있습니다.. $를 ( '

   ㅋ ') changeElementType ( '사전') addClass ( 'MyClass에를');

7. ---

   7.@AndrewWhitaker 다른 사람의 생각처럼 I는 jQuery 플러그인을 사용하는 - changeElementType () 메소드를 추가 할 수 있습니다. 그러나 플러그인은 ... 그래서, 성능이 요구되는 저 작은이고 잘 작동한다면, 블랙, 코드에 대한 어떠한 이잖아요 같고, 코드보다 가장 중요하다.

   @AndrewWhitaker 다른 사람의 생각처럼 I는 jQuery 플러그인을 사용하는 - changeElementType () 메소드를 추가 할 수 있습니다. 그러나 플러그인은 ... 그래서, 성능이 요구되는 저 작은이고 잘 작동한다면, 블랙, 코드에 대한 어떠한 이잖아요 같고, 코드보다 가장 중요하다.

   "순수 자바 스크립트는"jQuery를보다 더 나은 성능을 가지고 : 나는 FelixKling의 코드 @ AndrewWhitaker의 등 @보다 더 나은 성능을 가지고 있다고 생각합니다.

   여기에 "순수한 Javavascript"(그리고 "순수 DOM") 코드, jQuery 플러그인으로 캡슐화 :

    (function($) {  // @FelixKling's code
       $.fn.changeElementType = function(newType) {
         for (var k=0;k<this.length; k++) {
          var e = this[k];
          var new_element = document.createElement(newType),
           old_attributes = e.attributes,
           new_attributes = new_element.attributes,
           child = e.firstChild;
          for(var i = 0, len = old_attributes.length; i < len; i++) {
           new_attributes.setNamedItem(old_attributes.item(i).cloneNode());
          }
          do {
           new_element.appendChild(e.firstChild);
          }
          while(e.firstChild);
          e.parentNode.replaceChild(new_element, e);
         }
         return this; // for chain... $(this)?  not working with multiple 
       }
    })(jQuery);
   

8. ---

   8.여기에 내가 JQuery와 HTML 태그를 대체하는 데 사용하는 방법은 다음과 같다 :

   여기에 내가 JQuery와 HTML 태그를 대체하는 데 사용하는 방법은 다음과 같다 :

   // Iterate over each element and replace the tag while maintaining attributes
   $('b.xyzxterms').each(function() {
   
     // Create a new element and assign it attributes from the current element
     var NewElement = $("<h1 />");
     $.each(this.attributes, function(i, attrib){
       $(NewElement).attr(attrib.name, attrib.value);
     });
   
     // Replace the current element with the new one and carry over the contents
     $(this).replaceWith(function () {
       return $(NewElement).append($(this).contents());
     });
   
   });
   

9. ---

   9.replaceElem 방법은 아래에 오래된 태그 새로운 태그와 컨텍스트를 받아 성공적으로 교체를 실행합니다 :

   replaceElem 방법은 아래에 오래된 태그 새로운 태그와 컨텍스트를 받아 성공적으로 교체를 실행합니다 :

   replaceElem ( 'H2', 'H1', '#test'); 함수 replaceElem (oldElem, newElem, CTX) { oldElems = $ (oldElem, CTX); // $ .each (oldElems, 기능 (IDX, 엘) { VAR outerHTML에, newOuterHTML, regexOpeningTag, regexClosingTag, 태그 이름; // 개폐 태그를 동적으로 정규식을 만들 태그 이름 = $ (엘) 갔지 (0) .tagName; regexOpeningTag = 새로운 정규식 ( '^ <'+ 태그 이름, 'I'); regexClosingTag = 새로운 정규식 (태그 이름 + ''$ ','I '); 바닐라 JS와 외측 ELEM 페치 // outerHTML에 el.outerHTML =; // 시작 태그 교체 시작 newOuterHTML = outerHTML.replace (regexOpeningTag '<'+ newElem); //이 닫는 태그를 교체 계속 newOuterHTML = newOuterHTML.replace (regexClosingTag, newElem + '>'); 새로운 ELEM-문자열 이전 ELEM을 대체 // $ (엘) .replaceWith (newOuterHTML); }); } H1 { 색상 : 흰색; 배경 색상 : 블루; 위치 : 상대; } H1 : 전에 { 콘텐츠 '이 H1은'; 위치 : 절대; 최고 : 0; 좌측 : 50 %; 폰트 크기 : 5px; 배경 색상 : 검정; 색상 : 노란색; } <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">

   푸

   바

   행운을 빕니다...

10. ---

    10.자바 스크립트 솔루션

    자바 스크립트 솔루션

    새 요소를 기존 요소의 속성을 복사

    const $oldElem = document.querySelector('.old')
    const $newElem = document.createElement('div')
    
    Array.from($oldElem.attributes).map(a => {
      $newElem.setAttribute(a.name, a.value)
    })
    

    새로운 요소와 기존 요소를 교체

    $oldElem.parentNode.replaceChild($newElem, $oldElem)
    

11. ---

    11.여기 내 버전입니다. 그것은 fiskhandlarn의 버전 @ 기본적으로, 그러나 더 병합이 필요하지 않습니다 그래서 대신 새의 jQuery 객체를 구성, 그것은 단순히 새로 만든 사람과 기존 요소를 덮어 씁니다. 데모 : http://jsfiddle.net/0qa7wL1b/

    여기 내 버전입니다. 그것은 fiskhandlarn의 버전 @ 기본적으로, 그러나 더 병합이 필요하지 않습니다 그래서 대신 새의 jQuery 객체를 구성, 그것은 단순히 새로 만든 사람과 기존 요소를 덮어 씁니다. 데모 : http://jsfiddle.net/0qa7wL1b/

    $.fn.changeElementType = function( newType ){
      var $this = this;
    
      this.each( function( index ){
    
        var atts = {};
        $.each( this.attributes, function(){
          atts[ this.name ] = this.value;
        });
    
        var $old = $(this);
        var $new = $('<'+ newType +'/>', atts ).append( $old.contents() );
        $old.replaceWith( $new );
    
        $this[ index ] = $new[0];
      });
    
      return this;
    };
    

from https://stackoverflow.com/questions/8584098/how-to-change-an-element-type-using-jquery by cc-by-sa and MIT license