JQuery: как изменить имя тега? - PullRequest
Новая
       13

JQuery: как изменить имя тега?

55 голосов
/ 09 августа 2010

jQuery: как изменить имя тега?

Например: 

<tr>
    $1
</tr>

Мне нужно 

<div>
    $1
</div>

Да, я могу

  1. Создать элемент DOM
  2. Копирование содержимого tr в div
  3. Удалить tr из dom

Но можно ли сделать это напрямую?

PS: 

    $(tr).get(0).tagName = "div";

приводит к DOMException.

Ответы [ 16 ]

0 голосов
/ 23 февраля 2017 

$(function(){
    $('#switch').bind('click', function(){
        $('p').each(function(){
        	$(this).replaceWith($('<div/>').html($(this).html()));
        });
    });
});
p {
    background-color: red;
}

div {
    background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Hello</p>
<p>Hello2</p>
<p>Hello3</p>
<button id="switch">replace</button>
0 голосов
/ 13 мая 2016

Еще один скрипт для изменения имени узла 

function switchElement() {
  $element.each(function (index, oldElement) {
    let $newElement = $('<' + nodeName + '/>');
    _.each($element[0].attributes, function(attribute) {
      $newElement.attr(attribute.name, attribute.value);
    });
    $element.wrapInner($newElement).children().first().unwrap();
  });
}

http://jsfiddle.net/rc296owo/5/

Он скопирует атрибуты и внутренний HTML в новый элемент, а затем заменит старый.

0 голосов
/ 29 апреля 2015

Плагин Jquery для редактирования "tagName": 

(function($){
    var $newTag = null;
    $.fn.tagName = function(newTag){
        this.each(function(i, el){
            var $el = $(el);
            $newTag = $("<" + newTag + ">");

            // attributes
            $.each(el.attributes, function(i, attribute){
                $newTag.attr(attribute.nodeName, attribute.nodeValue);
            });
            // content
            $newTag.html($el.html());

            $el.replaceWith($newTag);
        });
        return $newTag;
    };
})(jQuery);

См .: http://jsfiddle.net/03gcnx9v/3/

0 голосов
/ 09 октября 2014

Возьми его за слово

Возьми вопрос по слову "как поменять имя тега?"Я бы предложил это решение:
Если это имеет смысл или нет, должно решаться в каждом конкретном случае.

Мой пример будет «переименовывать» все a-теги с гиперссылками для SMS с тегами span.Сохранение всех атрибутов и содержимого: 

$('a[href^="sms:"]').each(function(){
  var $t=$(this);
  var $new=$($t.wrap('<div>')
    .parent()
        .html()
        .replace(/^\s*<\s*a/g,'<span')
        .replace(/a\s*>\s*$/g,'span>')
        ).attr('href', null);
  $t.unwrap().replaceWith($new);
});

Поскольку нет смысла иметь тег span с атрибутом href, я тоже его удаляю.Это делает его пуленепробиваемым и совместимым со всеми браузерами, которые поддерживаются jquery.Есть и другие способы, которыми люди пытаются скопировать все Атрибуты в новый Элемент, но они несовместимы со всеми браузерами.

Хотя я думаю, что это довольно дорого сделать таким образом.

0 голосов
/ 01 мая 2014

Поскольку replaceWith() не работал для меня на элементной основе (возможно, потому что я использовал его внутри map()), я сделал это, создав новый элемент и скопировав атрибуты по мере необходимости. 

$items = $('select option').map(function(){

  var
    $source = $(this),
    $copy = $('<li></li>'),
    title = $source.text().replace( /this/, 'that' );

  $copy
    .data( 'additional_info' , $source.val() )
    .text(title);

  return $copy;
});

$('ul').append($items);
0 голосов
/ 14 марта 2013

Простое изменение значений свойств не сработает (как уже говорили, некоторые HTMLElement свойства доступны только для чтения; некоторые содержат прототипный контекст для более примитивных элементов).Самое близкое, что вы можете сделать для имитации API-интерфейса DOM, - это также имитировать процесс наследования прототипов в JavaScript.

'Установка' на прототипе объекта через __proto__ обычно вызывает недовольство.Кроме того, вы можете подумать, почему вы думаете, что вам нужно дублировать весь элемент DOM в первую очередь.Но вот так: 

// Define this at whatever scope you'll need to access it
// Most of these kinds of constructors are attached to the `window` object

window.HTMLBookElement = function() {

  function HTMLBookElement() {
    var book = document.createElement('book');
    book.__proto__ = document.createElement('audio');
    return book;
  }

  return new HTMLBookElement();

}

// Test your new element in a console (I'm assuming you have Chrome)

var harryPotter = new HTMLBookElement();

// You should have access to your new `HTMLBookElement` API as well as that
// of its prototype chain; since I prototyped `HTMLAudioElement`, you have 
// some default properties like `volume` and `preload`:

console.log(harryPotter);         // should log "<book></book>"
console.log(harryPotter.volume);  // should log "1"
console.log(harryPotter.preload); // should log "auto"

Все элементы DOM работают таким образом.Например: <div></div> создается HTMLDivElement, что расширяет HTMLElement, что, в свою очередь, расширяет Element, что, в свою очередь, расширяет Object.

Страница:
...