查找文本节点，然后用标签换行答案

【问题标题】：Find text node, then wrap in tags查找文本节点，然后用标签换行
【发布时间】：2013-02-07 15:07:37
【问题描述】：

我有以下 HTML，我无法控制：

<div id="sub-nav">
Vendita diretta            
<ul class="cms-nav-sidebar">            
<li class="icl-level-1"><a href="/tasting/">Degustazioni</a></li>
</ul>                           
</div>

我需要将“sub-nav”div 中的第一个文本位包含在 <h1> 标记中。到目前为止，我得到了这个：

$('#sub-nav').children().wrap("<h1></h1>");

但是，这会将div 中的所有元素包装在h1 标记中。如何精确定位第一个文本节点并将其包装在 h1 中？

谢谢戴夫

【问题讨论】：

jquery 在处理文本节点方面并不是特别好。在 jquery 之外工作可能会更好。
stackoverflow.com/q/298750/901048的可能重复
谢谢@Blazemonger。以该线程中的最后一个示例为例，我这样使用： var myText = $('#sub-nav').contents(':not(ul)').text(); - 然后如何使用 myText 变量将该值包装在 h1 中？

标签： jquery textnode

【解决方案1】：

正在处理 Blazemonger 评论中的链接...

$('#sub-nav').contents(':not(ul)').wrap("<h1></h1>");

...应该适用于您的情况。

【讨论】：

尽管如此，我承认它是高度特异性的并且充满了奇怪的副作用。
嗯，它有效 :) 在这种情况下，特异性是可以的，因为子菜单将遵循该顺序 > 文本节点 > ul
不是一个理想的解决方案，也不是可以在其他情况下使用的解决方案，但就我而言，这很好。

【解决方案2】：

$('#sub-nav').contents().filter(function(){
    return this.nodeType === 3; //text node type
}).eq(0).wrap("<h1></h1>");

【讨论】：