0

我有一个容器 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？谢谢你。

4

4 回答 4

4

你不能真正改变 tagName，但你可以用 p 替换现有的 div：

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

小提琴

于 2013-02-23T19:41:43.627 回答
4 
$(function() {
    $('.container > div').each(function() {
        $(this).contents().wrapAll("<p>").parent().unwrap();
    });
});
于 2013-02-23T19:42:14.493 回答
3

如果您按Contrl F并打开查找工具，然后单击查找和替换类型“<div>查找”和“替换”上的“ <p>”，然后浏览您想要的并点击替换，那么它会很容易完成没有任何错误:)

于 2013-02-23T19:43:12.430 回答
1

尝试这个

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

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

});
于 2013-02-23T19:46:15.450 回答