jQuery：在 HTML 字符串中展开元素

Question

http://jsfiddle.net/vol7ron/vZLnr/

我正在尝试找到最好的方法来解开 HTML 字符串（如 AJAX 响应），而无需先将其附加到文档中。另外，哪个最适合内存管理？

HTML

• <div class="label">Start With:</div>
  <pre id="original"></pre>
  
  <div class="label">What's Wanted:</div>
  <pre id="wanted"><div>foo</div><div>bar</div></pre>
  
  <hr />
  
  <div class="label">Attempt: .find()</div>
  <pre id="find"></pre>
  
  <div class="label">Attempt: .closest()</div>
  <pre id="closest"></pre>
  

CSS

• .label    { font       : italic bold 11px Georgia;   margin    : 1em 0 .5em; }
  pre       { border     : 1px solid black;            padding   : 1em;        }
  hr        { margin     : 1.5em 0 1em; }
  
  #original { background : #eee; }
  #wanted   { background : #def; }
  

JavaScript

•    var $html= "<pre><div>foo</div></pre><pre><div>bar</div></pre>";
  
     // No Changes
     jQuery('#original').html($html);
  
  
     // Find
     var $find = jQuery($html).find('*').unwrap();
     jQuery('#find').html($find);
  
  
     // Closest
     var $closest = jQuery($html).closest('pre').unwrap().html();
     jQuery('#closest').html($closest);
  
  
     // Wrapped
     var $pre = jQuery('pre', jQuery($html).wrap('<div />').parent() );
     $pre.each(function(){
                  jQuery('#wrapped').append(jQuery(this).html());
              });
  
     //=========== Prettify Output ===========
     var $wanted = jQuery('#wanted').html();
     jQuery('pre').not('#wanted, #original, #original *')
                  .each(function(){
                    var t = jQuery(this);
                    t.css({background: t.html()==$wanted?'#efe':'#fee'});
                  });
  

---

编辑

1. .find() 方法需要一些工作，因为它会删除空白容器。想象一下<pre><span>Code</span> <span>Here</span></pre>，它会变成<span>Code</span><span>Here</span>（去掉空格）。

Answer 1

解开它的一种通用方法是简单地遍历字符串，无论是针对最外层标记还是针对特定标记，将不属于该标记的每个字符添加到一个新字符串中（一旦您点击

我不能真正谈论内存管理，因为我不熟悉 javascript 如何管理内存。

希望对我有所帮助。

Answer 2

不清楚你的实际问题是什么，但我可以预见两个可能的困难。

1. .html()只返回一组HTML元素的内部内容，而不是标签本身

2. .find() 只搜索后代节点，不搜索提供的节点。

这两个问题都可以通过在调用这些方法之前在 HTML 周围添加一个额外的标签来解决。

编辑我认为你想要的是：

jQuery($html).filter('pre').children('div').appendTo('#wanted');

.filter() 行适用于顶级元素，而不适用于它们的后代。

在调用 .appendTo() 方法之前，不会将元素添加到真实的 DOM 中。