更换标签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效率，但我一直是这样的清晰度。