本文详解如何使用 jQuery 的 CSS 选择器（如 :not()）配合子元素结构，安全地对 .dataNumber 内的纯文本内容进行字符截断，同时完整保留其子元素（如 .subDataTitle）中的文本不被修改。
本文详解如何使用 jquery 的 css 选择器（如 `:not()`）配合子元素结构，安全地对 `.datanumber` 内的纯文本内容进行字符截断，同时完整保留其子元素（如 `.subdatatitle`）中的文本不被修改。
在实际前端开发中，常需对标题类容器（如 <h3 class="dataNumber"></h3>）中的主文本做长度限制，但又必须跳过其内部带特定类名的子元素（如 <span class="subDataTitle"></span>）。直接对 .dataNumber 调用 .text() 会合并所有后代文本（含 subDataTitle），而 .html() 粗暴截断则易破坏 DOM 结构——这正是原问题的核心困境。
关键认知：:not() 不作用于文本节点，而只匹配元素节点；且选择器中 .dataNumber.subDataTitle 是无效的，因为 subDataTitle 并不属于 .dataNumber 元素自身，而是其子元素。
✅ 正确解法是：将主文本也包裹进独立 <span></span> 标签，并利用子代选择器 > + :not() 精准定位非例外元素。改造后的 HTML 结构如下：
<h3 class="dataNumber"> <span>Artificial intelligence is the intelligence of machines...</span> <span class="subDataTitle">AI augments human intelligence with rich analytics</span> </h3>
此时可使用以下 jQuery 代码实现安全截断：
jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
$('.DataBox .diagram .dataNumber > *:not(.subDataTitle)').text(function(index, text) {
return text.length > 8
? text.substring(0, 12) + ' …'
: text;
});该写法优势明显：
-
> *确保只选取.dataNumber的直接子元素（避免误操作深层嵌套）； -
:not(.subDataTitle)精确排除指定类名的子元素； - 使用
.text(fn)回调函数替代.each()，语义更清晰、性能更优； - 原生支持返回值控制，无需手动
$(this).html(...)，规避 HTML 解析风险。
⚠️ 注意事项：
- 若无法修改 HTML 结构（即主文本为裸文本节点，无外层
<span></span>），则需手动遍历childNodes并过滤nodeType === 3（文本节点），再对纯文本做截断——但此方案复杂度高、易出错，不推荐作为首选； - 截断逻辑中建议使用
…（Unicode U+2026）替代...，视觉更专业； - 对国际化内容，应优先考虑 CSS 方案（如
line-clamp+display: -webkit-box）或服务端截断，兼顾可访问性与性能。
总结：jQuery 的选择器能力强大，但必须严格遵循“选择器匹配元素，而非文本”的基本原理。结构化标记（如统一用 <span></span> 包裹可操作文本）是实现精准 DOM 控制的前提，也是健壮前端实践的重要一环。
