p标签内含其他元素时如何使用jQuery包裹其中的纯文本内容

完全可以用jQuery实现，注意不要直接用text()方法取内容替换（会把p标签里的input、label这些子元素全部覆盖删除），正确思路是遍历p标签下的所有子节点，把独立的、非空白的纯文本节点筛选出来单独包裹即可。

可直接运行的代码 #

// 替换成你需要匹配的p标签选择器即可
$('p.wc_bookings_field_persons_71').contents().filter(function() {
  // 只保留文本节点，同时过滤掉标签缩进、换行产生的无意义空白节点
  return this.nodeType === 3 && $.trim(this.nodeValue).length;
}).wrap('<span class="tip-content"></span>');

处理后的DOM结构 #

代码执行完成后，你给出的示例HTML会变成如下结构，原本散在input后面的纯文本会被单独包裹在span标签里，后续你给这个span加隐藏、tooltip相关样式都可以随意操作，不会影响label和输入框的正常功能：

<p class="form-field form-field-wide wc_bookings_field_persons_71">
    <label for="wc_bookings_field_persons_71">Children:</label>
    <input type="number" value="1" step="1" min="1" max="150" name="wc_bookings_field_persons_71" id="wc_bookings_field_persons_71"> 
    <span class="tip-content">Enter the number of Children coming to Soft Play</span>
</p>

补充说明 #

• contents()方法会拿到匹配元素下所有类型的节点，包括文本节点、注释节点、元素节点，比只返回元素节点的children()方法更适配当前场景
• 过滤空白节点的逻辑不能省略，否则HTML中标签换行、缩进产生的无意义空白文本也会被多余的标签包裹，生成无效DOM节点
• 如果需要批量处理多个同结构的p标签，直接修改开头的jQuery选择器匹配所有目标元素即可，核心逻辑不需要调整

内容的提问来源于stack exchange，提问作者Sam Skirrow