Ersetzen Tag p in Blockquote

Question

br wie HTML-Tag p in mit br, der Arbeit mit Klick button

Vor ersetzen:

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

nach:

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

Answer 1

Um dies zu erreichen Sie können der replaceWith()-Methode eine Funktion bereitstellen, die den aktuellen HTML-Inhalt des Tags p mit einem angehängten <br /> am Ende zurückgibt. Versuchen Sie folgendes:

$('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

Dies ist ein weiterer Weg, dies zu tun ist. Holen Sie den Text in einem Array und es nur anschließen:

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

Hier ist eine Alternative, mit append und unwrap die <br/> dann entfernen Sie die umliegenden <p> hinzuzufügen.

$('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>

---

Sie könnten appendTo und Kette der unwrap für Effizienz, aber ich hielt es auf diese Weise für Klarheit.