jQuery非DOMオブジェクトの要素の1つを置き換えます。

Question

html = "<p>title</p><div><ul class='www'></ul>something</div>"; 
$html = $(html); 
$html.filter('p').replaceWith('<h2>' + $html.filter('p').html() + '</h2>'); //not working 
container = $('<div></div>'); 
html = container.html($html)[0].innerHTML; //trying to output "<h2>title</h2><div><ul class='www'></ul>something</div>" 

DOM以外の環境では、HTML文字列を変更してメンバーの1つを置き換えようとしています。 jQueryのreplaceWithはDOM用であるため動作しません。これはどうすればいいですか？

Answer 1

例を見てください。最初にBを削除してからAに追加します。その後、新しいCを挿入します.A、B、Cをすべてに置き換えることができます。

重要なのは、pがのルートであるとして削除し、追加/先頭に追加要素が交換されているが、それは

a = $('#a'); 
 
b = $('#b'); 
 
c = $('<span>').attr('id', 'c').text('C'); 
 

 
b.remove(); 
 
a.prepend(b); 
 
a.append(c);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="parent"> 
 
    <span id="a">A</span> 
 
    <span id="b">B</span> 
 
</div>

Answer 2

を:) manuallay、$htmlが更新されていないということであり、 $html変数

html = "<p>title</p><div><ul class='www'></ul>something</div>"; 
 
$container = $('<div></div>'); 
 
$container.html(html); 
 
$container.find('p').replaceWith(function(idx, html) { 
 
    return '<h2>' + html + '</h2>' 
 
}) 
 
html = $container[0].innerHTML; 
 
console.log(html)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>