段落を、既存の段落値を含むテキストエリアに置き換えます。

文書内のすべての段落を見つけて、テキストエリア内のテキストが元の内容であるテキストエリアに置きたいと思います。私はjqueryの.replaceWith（）と.contents（）を試みましたが、どちらも動作しません。段落を、既存の段落値を含むテキストエリアに置き換えます。

<html> 
    <head> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script> 
    $(document).ready(function() { 
     $('p,div').replaceWith("<textarea rows='4'>" + $(this).text() + "</textarea>"); 
    }); 
</script> 
</head> 

<body> 
<p>first</p> 
<p>second</p> 
<p>third</p> 
</body> 

</html>

と

<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script> 
     $(document).ready(function() { 
      $('p,div').replaceWith("<textarea rows='4'>" + $(this).contents().filter(function() { return this.nodeType === 3 }).text() + "</textarea>"); 
     }); 
    </script> 
</head> 

<body> 
    <p>first</p> 
    <p>second</p> 
    <p>third</p> 
</body> 

</html>

出典

2017-03-14 user1200984

あなたの問題はthisの範囲によるものです。それが機能するには、replaceWith()に、セット内の一致する各要素で実行される関数を指定する必要があります。この関数から元の要素を置き換えるHTMLを返すだけで済みます。これを試してみてください：

$('p, div').replaceWith(function() { 
 
    return '<textarea rows="4">' + $(this).text() + '</textarea>'; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<p>first</p> 
 
<p>second</p> 
 
<p>third</p>

出典

2017-03-14 14:50:01

あなた$(this)は、ドキュメントを参照し、現在のHTML要素に選択を形成しないことになります。代わりに、すべての要素をループすることができます：

$(document).ready(function() { 
    $('p,div').each(function(){ 
    var $this = $(this); 
    $this.replaceWith("<textarea rows='4'>" + $this.text() + "</textarea>"); 
    }); 
});

Example

出典

2017-03-14 14:49:28 empiric

段落を、既存の段落値を含むテキストエリアに置き換えます。

答えて

関連する問題