Question

如何使用p替换blockquote中的html标记br，使用点击button

之前：

<div id='tes'>
    <blockquote>
        <p>Lorem Ipsum one</p>
        <p>Lorem Ipsum two</p>
        <p>Lorem Ipsum <b>bold</b></p>
    </blockquote>
</div>
<button>Replace P</button>

之后：

<div id='tes'>
    <blockquote>
        Lorem Ipsum one<br/>
        Lorem Ipsum two<br/>
        Lorem Ipsum <b>bold</b><br/>
    </blockquote>
</div>

Answer 1

要实现此目的，您可以为replaceWith()方法提供一个函数，该方法返回p标记的当前HTML内容，最后附加<br />。试试这个：

＆＃13;

$('button').click(function() {
  $('blockquote p').replaceWith(function() {
    return $(this).html() + '<br />';
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='tes'>
  <blockquote>
    <p>Lorem Ipsum one</p>
    <p>Lorem Ipsum two</p>
    <p>Lorem Ipsum <b>bold</b></p>
  </blockquote>
</div>
<button>Replace P</button>

＆＃13;

Answer 2

这是另一种方法。获取数组中的文本并加入它：

＆＃13;

var $btn = $('button');

$btn.on('click', changeP2br);

function changeP2br(){
  var arr = $('#tes p').map(function(_,o){
     return o.innerHTML;
  }).get();
  $('#tes blockquote').html(arr.join('<br>'));
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='tes'>
    <blockquote>
        <p>Lorem Ipsum one</p>
        <p>Lorem Ipsum two</p>
        <p>Lorem Ipsum <b>bold</b></p>
    </blockquote>
</div>
<button>Replace P</button>

＆＃13;

Answer 3

这是另一种选择，使用append和unwrap添加<br/>，然后移除周围的<p>。

＆＃13;

$('button').click(function() {
  $('blockquote p').append('<br />');
  $('blockquote p>br').unwrap();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='tes'>
  <blockquote>
    <p>Lorem Ipsum one</p>
    <p>Lorem Ipsum two</p>
    <p>Lorem Ipsum <b>bold</b></p>
  </blockquote>
</div>
<button>Replace P</button>

＆＃13;

您可以使用appendTo并链接unwrap以提高效率，但为了清晰起见，我保持这种方式。

在Blockquote中将Tag p替换为br

3 个答案: