2

为了演示，请参阅我的 html ：

<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
See it:
<pre>
print "Say hello"
</pre>
<p><b>==SEP==</b></p>
<pre>
class Voila {
public:
  // Voila
  static const string VOILA = "Voila";

  // will not interfere with embedded <a href="#voila1">tags</a>.
}
</pre>
</html>

在 Chrome v26 控制台中，我执行：

var pres_orig=$('pre').clone()
$('pre').replaceWith('<pre>spam</pre>')

然后我的问题：如何<pre>从保存的 pres_orig 中克隆回内容，以便我的页面显示其原始内容？

我尝试了以下不起作用的方法：

$('pre').replaceWith(pres_orig)

在此处输入图像描述 在此处输入图像描述

4

3 回答 3

1

因为您有多个pre没有识别价值的元素。您可以采取的一种方法是循环所有元素并将内部 html 存储在一个数组中。然后当你需要再次加载它们时，你可以循环它们并使用索引拉取数组 html。

像这样的东西：

//store all the data on load
var storage = [];
$("pre").each(function(){
   storage.push($(this).html()); 
});

//set the new html to "spam"
$("pre").html("spam");

//reload the original data
$("pre").each(function(index){
    $(this).html(storage[index]);
});

这是一个工作示例

于 2013-04-22T14:00:18.670 回答
0

不要克隆。保存内部（或外部）HTML。将内部 HTML 插入 pre. 使用 .html() 获取内部 HTML，使用 .html(content) 替换内部 HTML。

<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script>
      $(function() {
        var pres = [];
        // this is how you store it:
        $('pre').each(function(i) {
          pres[i] = $(this).html();
        });
        // this is how you restore it:
        $('pre').each(function(i) {
          $(this).html(pres[i] + "SPAM ;)");
        });
      });
    </script>
  </head>
  <body>
    See it:
    <pre>
      print "Say hello"
    </pre>
    <p><b>==SEP==</b></p>
    <pre>
      class Voila {
      public:
        // Voila
        static const string VOILA = "Voila";

        // will not interfere with embedded <a href="#voila1">tags</a>.
      }
    </pre>
  </body>
</html>

因此，如果您想将此数组保存到文件或 cookie 中，请使用JSON3 对其进行序列化。

于 2013-04-22T13:03:42.337 回答
0

我想我找到了迄今为​​止最好的解决方案，只有一个说法：

for(var i=0; i<pres_orig.length; i++) 
    $('pre').eq(i).replaceWith(pres_orig.eq(i).clone());

或者

$('pre').each( function(i){ 
    $(this).replaceWith(pres_orig.eq(i).clone()) 
});

注意：使用 clone()pres_orig保留它的独立副本，这样我们就可以将它克隆回任意次数。

在此处输入图像描述

于 2013-04-23T02:14:57.673 回答