Question

我想找到文档中的所有段落，并用textarea替换它们，其中textarea中的文本是原始内容。我已经尝试过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>

Answer 1

您的问题归因于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>

Answer 2

您的$(this)将引用该文档，而不是选择的当前html元素。您可以循环遍历所有元素：

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

Example

用包含现有段落值的textarea替换段落

2 个答案: