Question

我有一个容器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

Answer 2

$(function() {
    $('.container > div').each(function() {
        $(this).contents().wrapAll("<p>").parent().unwrap();
    });
});

Answer 3

如果您按 Contrl F 并打开查找工具，然后点击查找并替换“<div>”上的“<p>”类型将很容易在替换然后通过你想要的那些并点击替换然后它将很容易地完成而没有任何错误：）

Answer 4

试试这个

$(".container").children("div").replaceWith(function(){

   return $("<p />").append($(this).contents());

});

将<div>转换为<p> </p> </div>

4 个答案: