使用jQuery选择指定class元素按data属性截断文本报错如何解决

错误原因 #

你的代码报错是因为部分匹配到的.p_text元素没有设置data-text属性，$(this).data('text')会返回undefined，调用substring方法时抛出类型错误导致代码执行中断，因此只有第一个元素的文本被修改成功。

解决方案 #

你需要增加取值兜底逻辑，当data-text不存在时取元素本身的原始文本，同时可以增加长度判断，避免原本长度不足20的文本也被拼接多余的省略号：

$('.p_text').each(function() {
  // 优先取data-text属性，兜底取元素原有文本
  const originText = $(this).data('text') || $(this).text();
  // 长度超过20才截断拼接省略号
  const finalText = originText.length > 20 ? originText.substring(0, 20) + '...' : originText;
  $(this).text(finalText);
});

如果业务要求所有.p_text元素必须携带data-text属性，你可以额外排查页面HTML结构，确认是否混入了未设置该属性的同class元素，从源头解决问题。

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