如何使用jQuery选择.dataNumber排除.subDataTitle并实现文本截断

你的代码存在三个核心问题：

• 选择器逻辑错误：.subDataTitle 是 .dataNumber 的子元素，而非 .dataNumber 的类，所以 :not 选择器完全没起到排除作用，依然选中了整个 .dataNumber 元素。
• 文本长度计算错误：你用 $(this).text() 获取的是 .dataNumber 下所有文本的总和（包括 .subDataTitle 的内容），导致截断判断的依据不正确。
• HTML操作不当：直接截取 .html() 会把 .subDataTitle 元素也一并截断，破坏原有结构。

下面提供两种可行的解决方案：

方案一：直接操作目标文本节点（精准控制） #

这种方法会单独处理 .dataNumber 下的直接文本节点，完全保留 .subDataTitle 元素：

$('.DataBox .diagram .dataNumber').each(function() {
  const $dataNumber = $(this);
  // 筛选出.dataNumber下的非空直接文本节点
  const targetTextNode = $dataNumber.contents().filter(function() {
    return this.nodeType === Node.TEXT_NODE && $.trim(this.textContent) !== '';
  })[0];

  if (targetTextNode) {
    const originalText = $.trim(targetTextNode.textContent);
    const maxLength = 12; // 自定义截断长度
    if (originalText.length > maxLength) {
      targetTextNode.textContent = originalText.substring(0, maxLength) + ' ...';
    }
  }
});

方案二：暂存子元素后处理（直观易理解） #

先把 .subDataTitle 临时移出，处理完主文本后再放回：

$('.DataBox .diagram .dataNumber').each(function() {
  const $dataNumber = $(this);
  // 临时移除并保存.subDataTitle元素
  const $subTitle = $dataNumber.find('.subDataTitle').detach();
  
  // 获取并处理主文本（此时元素内只剩主文本内容）
  let mainText = $.trim($dataNumber.text());
  const maxLength = 12;
  if (mainText.length > maxLength) {
    mainText = mainText.substring(0, maxLength) + ' ...';
  }
  
  // 重新设置主文本并放回.subDataTitle
  $dataNumber.text(mainText).append($subTitle);
});

两种方案的适用场景：

• 方案一更适合需要保留原文本格式（如换行、空格）的场景，精准度更高。
• 方案二代码更简洁，适合DOM结构固定的简单场景。

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