將標簽p替換為Blockquote中的br

Question

如何用br替換blockquote html標簽p ，使用單擊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 /> 。 嘗試這個：

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

 <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> 

Answer 2

這是另一種方法。 獲取數組中的文本，然后將其加入：

 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>')); } 

 <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> 

Answer 3

這是一種替代方法，使用append和unwrap添加<br/>然后刪除周圍的<p> 。

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

 <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> 

---

您可以使用appendTo並將鏈式unwrap以提高效率，但是為了清楚起見，我將其保留為這種方式。