javascript - "outerHtml of undefined"jquery 错误

Question

我有这些字符串

var str = '<div class="page">&lt;div class</div>
<div class="page">=&quot;nodejs-c</div>
<div class="page">lass&quot;&gt;Wakh</div>
<div class="page">ed un sing</div>
<div class="page">e sur son </div>
<div class="page">argent les</div>
<div class="page"> appelle d</div>
<div class="page">e l&#39;argent</div>
<div class="page"> et garçon</div>
<div class="page">asseoir S</div>
<div class="page">inge incha</div>
<div class="page">ngée.&lt;&#x2F;div</div>
<div class="page">&gt;</div>';

我尝试用 pageWrap 包装页面类

var content = $(str).wrap('<div id="source-wrapper"></div>')
                    .find('.page')
                    .wrap('<div class="pageWrap"></div>')
                    .closest('.pageWrap')
                    .text(function() {
                        return $(this).html()
                    })
                    .closest('#source-wrapper')
                    [0].outerHTML;

我得到了未定义的Html？我的 text() 函数有什么问题吗？

Answer 1

您已经选择了.page，因此find()方法在这里不起作用，它会在其中搜索 .page 但其中没有包含该类的元素。最后，您尝试获取 id 未定义的 dom 对象，并且没有选择任何内容并返回 undefined 并且您尝试从 undefined 获取 outerHTML 属性.

使用wrappAll()方法使用单个元素包装所有元素，然后就不需要 find()方法，因为它已经是 .page 元素的集合。

var str = '<div class="page">&lt;div class</div><div class="page">=&quot;nodejs-c</div><div class="page">lass&quot;&gt;Wakh</div><div class="page">ed un sing</div><div class="page">e sur son </div><div class="page">argent les</div><div class="page"> appelle d</div><div class="page">e l&#39;argent</div><div class="page"> et garçon</div><div class="page"> asseoir S</div><div class="page">inge incha</div><div class="page">ngée.&lt;&#x2F;div</div><div class="page">&gt;</div>';


var content = $(str)
  // wrap all the elements by a single tag
  .wrapAll('<div id="source-wrapper"></div>')
  // wrap each individual element
  .wrap('<div class="pageWrap"></div>')
  .closest('.pageWrap')
  .text(function() {
    return $(this).html();
  })
  .closest('#source-wrapper')[0].outerHTML;

console.log(content);

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