更換標籤p在大段引用

Question

爲BR如何與br與點擊button

取代HTML標籤p在，工作前：

<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效率，但我一直是這樣的清晰度。