如何使用jQuery设置元素内纯文本样式，及span.foo后文本为红色？

核心思路 #

首先得明确：DOM里的纯文本是Text节点，而jQuery的.css()方法只能作用于元素节点（比如<div>、<span>这类），没法直接给Text节点设置样式。所以常规做法是把目标纯文本节点包裹进一个可设置样式的元素（比如<span>），再给这个元素加样式。

针对你的具体场景（给span.foo之后的纯文本设红色） #

你的HTML结构是这样的：

<li> not this text <span class='foo'>not this text</span> this text </li>
<li> not this text <span class="foo">not this text</span> and this text </li>
<li> not this text <span class='foo'>not this text</span> and this text as well </li>

要实现需求，可以按以下步骤来：

• 遍历每个<li>元素
• 找到每个<li>里的span.foo，然后获取它后面的所有兄弟节点
• 筛选出其中的Text节点（通过nodeType === 3判断，Text节点的nodeType是3）
• 把这些Text节点包裹进一个新的<span>，然后用.css()给这个span设置红色字体

具体代码如下：

$('li').each(function() {
  // 找到当前li里的span.foo
  const $fooSpan = $(this).find('span.foo');
  // 获取span.foo之后的第一个兄弟节点
  let currentNode = $fooSpan[0].nextSibling;
  
  // 遍历后续的所有兄弟节点（可能包含多个文本节点或空白节点）
  while (currentNode) {
    // 只处理有效文本节点（过滤空的空白节点）
    if (currentNode.nodeType === 3 && $.trim(currentNode.nodeValue).length > 0) {
      // 把文本节点包裹成span元素，再设置样式
      const $wrappedSpan = $(currentNode).wrap('<span></span>').parent();
      $wrappedSpan.css('color', 'red');
    }
    currentNode = currentNode.nextSibling;
  }
});

关键细节说明 #

• currentNode.nodeType === 3：用来精准识别Text节点，避免误操作元素节点
• $.trim(currentNode.nodeValue).length > 0：过滤掉那些只有空格、换行的无效空白节点，防止给空白区域加样式
• 如果不想额外生成新的class，也可以直接在包裹时内嵌样式：

  $(currentNode).wrap('<span style="color: red;"></span>');
  

这样就能精准地把每个<li>里span.foo之后的纯文本变成红色啦！

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