循环截取元素文本时出现TypeError: $(...).substring is not a function报错求解

嘿，这个错误其实挺常见的，咱们来一步步拆解明白：

错误原因 #

你代码里的$(this)是jQuery包装后的DOM元素对象，而substring()是JavaScript原生字符串对象专属的方法——直接在jQuery对象上调用字符串方法，自然会抛出TypeError: $(...).substring is not a function的错误啦。

修正后的代码 #

你需要先通过.text()方法获取元素的文本内容（这时候得到的是标准字符串），再对这个字符串执行截断操作，最后把截断后的内容重新设置回元素：

$('.post_text_div h1').each(function () {
  // 先获取元素的文本内容（转为字符串类型）
  const originalText = $(this).text();
  // 对字符串执行截断操作
  const truncated = originalText.substring(0, 10);
  // 将截断后的文本设置回元素
  $(this).text(truncated);
});

优化小技巧（可选） #

如果想让截断效果更友好，比如只有当文本长度超过10个字符时才添加省略号，可以这样写：

$('.post_text_div h1').each(function () {
  const originalText = $(this).text();
  let truncated = originalText;
  // 仅当文本长度超过10时才截断加省略号
  if (originalText.length > 10) {
    truncated = originalText.substring(0, 10) + '...';
  }
  $(this).text(truncated);
});

这样处理后，短文本不会被强行截断，长文本也会有明确的截断标识～

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