Question

假设您有多个具有相同类名的帧，这些帧将在您的页面上动态创建，其中包含各种长度的文本，并且您希望将每个帧限制为显示100个字符。你会怎么做到这一点？到目前为止，我已经提出了这个不起作用的JQuery脚本。

$('.frame').each(function(){
var item = this.attr('id').html().text();

if (item.length > 100){
    item.trim(101, maxlength) + "...";
}
});

我在这里尝试完成的是首先按类遍历每个元素，然后按ID收集每个元素，以便在需要时将其唯一地应用，然后运行if条件来测试它并在需要的地方修剪它。这是迄今为止我能够集合的最好的，所以任何进一步的帮助将不胜感激。这是编码的其余部分，因此您可以看到我尝试将其应用到的内容。

CSS

.frame{
  width:300px;
  height:100px;
  border:1px solid #000;
  margin: auto;
  margin-top:20px;
  clear:both;
  }

HTML

<div class="frame" id="show01">
   Lorem ipsum a bunch of times which I took out to make this shorter
</div>

<div class="frame" id="show02">
   Lorem ipsum a bunch of times which I took out to make this shorter
</div>

<div class="frame" id="show03">
   Lorem ipsum a bunch of times which I took out to make this shorter
</div>

<div class="frame" id="show04">
   Lorem ipsum a bunch of times which I took out to make this shorter
</div>

<div class="frame" id="show05">
   Lorem ipsum a bunch of times which I took out to make this shorter
</div>

<div class="frame" id="show06">
   Lorem ipsum a bunch of times which I took out to make this shorter
</div>

此外，如果有人可以告诉我如何添加JSfiddle，我会在帖子中包含该内容，如果需要的话。由于他们更新了我一直很难弄清楚如何使用它，我只是想出了如何将Jquery库添加到它。

Answer 1

您应该在控制台中看到错误，因为this是DOM元素，而不是jQuery对象，因此this.attr()无效。

您真正想要的方法是替换：

var item = this.attr('id').html().text();

用

var item = $(this).text();

Answer 2

您必须使用类似substring()的内容来获取可见字符串。

substring()方法从两个指定索引之间的字符串中提取字符，并返回新的子字符串。

此方法提取"start"和"end"之间字符串中的字符，不包括"end"本身。

修改了jQuery Block：

$('.frame').each(function(){
    var limit = 100;
    var item = $(this).text(); //it is return a string

    if (item.length > limit){
        $(this).text(item.substring(0, (limit + 1)) + "...");
    }else{
        $(this).text(item);
    }
});

这就是你如何弄清楚如何使用它的方法。如果要显示隐藏文本，如read more，请使用一些技术来实现它。现在很容易。

如何使用JQuery将字符限制应用于与多个元素共享类名的元素？

2 个答案: