Jquery - 选择具有特定类的所有元素并根据数据属性更改文本答案

【问题标题】：Jquery - select all element with specific class and change text based on data attributeJquery - 选择具有特定类的所有元素并根据数据属性更改文本
【发布时间】：2021-06-24 18:07:15
【问题描述】：

我有这个 HTML：

$('.p_text').each(function() {
  var txt = $(this).data('text');
  $(this).text(txt.substring(0, 20) + '...');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="p_text" data-text="2 Pieces Sets Tracksuit Men New Brand Autumn Winter Hooded Sweatshirt +Drawstring Pants Male Stripe Patchwork Hoodies Bigsweety">2 Pieces Sets Tracksuit Men New Brand Autumn ...</span>
<span class="p_text" data-text="2019 brand casual plaid luxury plus size long sleeve slim fit men shirt spring social dress shirts mens fashions jersey 41607">2019 brand casual plaid luxury plus size long sleeve slim fit men shirt ...</span>

    <span class="p_text" data-text="2 Pieces Sets Tracksuit Men New Brand Autumn Winter Hooded Sweatshirt +Drawstring Pants Male Stripe Patchwork Hoodies Bigsweety">2 Pieces Sets Tracksuit Men New Brand Autumn ...</span>
<span class="p_text" data-text="2019 brand casual plaid luxury plus size long sleeve slim fit men shirt spring social dress shirts mens fashions jersey 41607">2019 brand casual plaid luxury plus size long sleeve slim fit men shirt ...</span>

我需要选择类p_text 的所有跨度并将内部文本限制为20 个字符，但我需要首先从属性data-text 中获取文本

我试过了：

$('.p_text').each(function(){
   
var txt = $(this).data('text');
$(this).text(txt.substring(0,20) + '...');
 });

但它改变了第一个跨度中唯一的文本，然后给了我一个错误：

未捕获的类型错误：无法读取未定义的属性“子字符串”

如何使用类 p_text 限制每个 span 元素中的文本？

【问题讨论】：

我对你的代码做了一个 sn-p。请更新以解释为什么这不起作用。
嗨，对不起，当我改变班级时它的工作......必须在任何地方使用同一个班级。我将删除问题

标签： javascript html jquery substring

【解决方案1】：

还有一个 CSS 唯一方法可以使用 text-overflow: ellipsis; 来实现这一点，这使它具有响应性。在下面的 sn-p 中调整 div 的大小。

.truncate {
  position: relative;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.container {
  border: 2px solid;
  padding: 20px; 
  width: 100px;
  resize: horizontal;
  overflow: auto;
}

<div class="container">
  <div class="truncate">2 Pieces Sets Tracksuit Men New Brand Autumn Winter Hooded Sweatshirt +Drawstring Pants Male Stripe Patchwork Hoodies Bigsweety</div>
  <div class="truncate">
    2019 brand casual plaid luxury plus size long sleeve slim fit men shirt spring social dress shirts mens fashions jersey 41607
  </div>
</div>

【讨论】：