javascript - 将 转换为

Question

这个问题已经有答案了:

Use jQuery to change an HTML tag? (11 个回答)

已关闭 10 年前。

我有一个容器 div，其中还有几个其他 div:

<div class='container'>
 <div>one</div>
 <div>two</div>
 <div>three</div>
 <div>four</div>
</div>

我想将容器div中的所有div更改为ps，这样它看起来像:

 <div class='container'>
 <p>one</p>
 <p>two</p>
 <p>three</p>
 <p>four</p>
</div>

如何通过 jquery 实现这一点？提前致谢。

编辑:对于缺乏清晰度，我深表歉意，准确地说，我有多个 div 容器，每个容器内都有其他 div。我不认为已经提供的答案只会更改 div 容器包含的 div，而是会更改所有 div:

<!--block one-->
 <div class='container'>
 <div>one</div>
 <div>two</div>
 <div>three</div>
 <div>four</div>
</div>

 <!--block two-->
  <div class='container'>
 <div>one</div>
 <div>two</div>
 <div>three</div>
 <div>four</div>
</div>

  <!--block three-->
  <div class='container'>
 <div>one</div>
 <div>two</div>
 <div>three</div>
 <div>four</div>
</div>

等等。我需要的是只有 div 类容器内的 div 更改为 p 的:

  <div class='container'>
   <p>one</p>
   <p>two</p>
   <p>three</p>
   <p>four</p>
  </div>


 <div class='container'>
   <p>one</p>
   <p>two</p>
   <p>three</p>
   <p>four</p>
  </div>

有一个小插件可以做到这一点:

  (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);

使用:

$(\"div\").changeElementType(\"p\");

但是这样做不会将所有 div 更改为 ps 吗？我如何修改它以仅针对类容器中 div 内的 div？谢谢。

Answer 1

您无法真正更改 tagName，但您可以用 p 替换现有的 div:

$('.container').children('div').each(function(e, el) {
    $(el).replaceWith( $('<p />', {text: $(this).text()}) );
});

FIDDLE