jQuery为商品标题、价格文本包裹span标签失效问题求助

问题原因 #

你之前的代码无效是因为：$(".product_desc").text().trim().split('\n')[0] 提取的是文本字符串，把它转成jQuery对象后，这个对象并不属于当前页面的DOM结构，所以wrap操作不会影响页面上的实际元素。必须直接定位到DOM中的文本节点进行操作。

具体实现代码 #

1. 包裹商品标题（首个有效文本节点）

// 筛选出.product_desc下的有效文本节点（非空白），取第一个包裹span
$('.product_desc').contents().filter(function() {
  // nodeType === 3 表示是文本节点，同时过滤掉纯空白的文本
  return this.nodeType === 3 && $.trim(this.nodeValue).length > 0;
}).first().wrap('<span class="product-title"></span>');

2. 包裹价格（末尾有效文本节点）

// 筛选出.product_desc下的有效文本节点，取最后一个包裹span
$('.product_desc').contents().filter(function() {
  return this.nodeType === 3 && $.trim(this.nodeValue).length > 0;
}).last().wrap('<span class="product-price"></span>');

代码说明 #

• contents()：获取元素的所有子节点，包括文本节点和元素节点（普通的children()只会获取元素节点，这是关键区别）。
• filter()：过滤出类型为文本节点（nodeType === 3）且内容非空白的节点，避免选中换行、空格这类无效文本。
• first()/last()：分别定位到首个和末尾的目标文本节点，再用wrap()包裹指定的span标签。

内容的提问来源于stack exchange，提问作者Rony Cohen