在LI内容上使用wrapInner，但不在子列表中使用？

Question

请考虑以下代码：

<ul>
  <li>Home

    <ol>
      <li>One
        <ol>
          <li>Beta</li>
        </ol>
      </li>
    </ol>
  </li>
</ul>

我想将LI标签自动包装在span标签中，但只包含标签，而不是子LI，如下所示：

<ul>
  <li><span>Home</span>

    <ol>
      <li><span>One</span>
        <ol>
          <li><span>Beta</span></li>
        </ol>
      </li>
    </ol>
  </li>
</ul>

但是在玩了一会后，我不确定这是否可行。我正在尝试这些方法：

$('.hierarchy li').wrapInner('<span />');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>Home

    <ol>
      <li>One
        <ol>
          <li>Beta</li>
        </ol>
      </li>
    </ol>
  </li>
</ul>

但是LI中的所有都包含在<span>中。这可能吗，还是我需要使用的wrapInner();以外的东西？

Answer 1

使用.wrapInner()无法实现，您可以.filter() .childeNodes，并包裹.textNodes。请注意，它假定所有匹配的.nextNodes都应该用span填充。

$('ul li').contents().filter(function() {
    return this.nodeType === 3 && $.trim(this.nodeValue).length;
}).wrap('<span/>');

http://jsfiddle.net/5WnJ4/