本文讲解如何使用 jQuery 的 CSS 选择器（特别是 :not()）精准定位 .dataNumber 元素内除 .subDataTitle 外的纯文本内容，并安全执行字符截断，避免误操作嵌套子元素。核心在于理解 DOM 层级关系与选择器作用范围。
本文讲解如何使用 jquery 的 css 选择器（特别是 `:not()`）精准定位 `.datanumber` 元素内除 `.subdatatitle` 外的纯文本内容，并安全执行字符截断，避免误操作嵌套子元素。核心在于理解 dom 层级关系与选择器作用范围。
在实际开发中，我们常需对标题类元素（如 <h3 class="dataNumber"></h3>）中的主文本做长度限制，但又必须保留其内部带特殊样式的子元素（如 <span class="subDataTitle"></span>）内容完整——此时直接对整个 .dataNumber 调用 .text() 或 .html() 会破坏结构或误删关键文本。
根本问题在于：$(selector).not(...) 无法“过滤子节点的文本”，它只用于筛选匹配的父级元素。你原写法：
$('.DataBox .diagram .dataNumber:not(.DataBox .diagram .dataNumber.subDataTitle)')试图排除一个同时拥有 dataNumber 和 subDataTitle 类的 <h3></h3> 元素，但 .subDataTitle 实际属于 <h3></h3> 内部的 <span></span>，而非 <h3></h3> 自身——因此该选择器始终匹配整个 <h3></h3>，毫无排除效果。
✅ 正确解法是将主文本也包裹进独立标签（推荐 <span></span>），再利用子元素选择器 + :not() 精准定位：
jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
<h3 class="dataNumber"> <span>Artificial intelligence is the intelligence ... animals.</span> <span class="subDataTitle">AI augments human intelligence with rich analytics</span> </h3>
随后使用以下 jQuery 代码，仅对 .dataNumber 的直系子元素中非 .subDataTitle 的 <span></span> 进行截断：
$('.DataBox .diagram .dataNumber > *:not(.subDataTitle)').text(function(index, text) {
return text.length > 8
? text.substring(0, 12) + ' …'
: text;
});? 关键说明：
-
> *表示只选取.dataNumber的直接子元素（避免深层嵌套干扰）； -
:not(.subDataTitle)在子元素层级生效，准确排除目标<span></span>； - 使用
.text(fn)回调函数替代.each()，语义更清晰、代码更简洁； - 截断逻辑在回调中返回新文本，自动更新对应元素内容。
⚠️ 注意事项：
- 若 HTML 结构无法修改（即主文本无包裹标签），则需手动遍历
childNodes并过滤文本节点（nodeType === 3），但易出错且兼容性差，不推荐； - 避免直接操作
.html()截断（如substring(0,12)），可能意外截断 HTML 标签导致 DOM 损坏； - 更优雅的替代方案是纯 CSS 实现（如
display: -webkit-box; -webkit-line-clamp: 2;配合overflow: hidden），适用于单行/多行静态截断，无需 JS 干预。
综上，jQuery 中“排除某类子元素”不是靠否定父元素，而是靠提升结构粒度 + 精确限定作用域（> + :not()）。合理封装内容为语义化标签，是实现可控 DOM 操作的前提。
