如何將字符限制應用於使用JQuery與多個元素共享類名的元素？

Question

假設您有多個具有相同類名的框架，該框架將在您的頁面上動態創建，其中包含各種長度的文本，並且您想限制每個框架顯示100個字符。你會如何做到這一點？到目前爲止，我已經想出了這個不起作用的JQuery腳本。

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

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

我想在這裏做到的是先通過由類的每個元素，然後通過收集每個ID元素，因此其應用於唯一需要的地方，然後再運行，如果條件測試，並修剪需要的地方。這是迄今爲止我所能達到的最好的，所以任何進一步的幫助將不勝感激。下面是編碼的其餘部分，所以你可以看到我正在嘗試應用它。

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

你必須使用像substring()東西讓你看到的字符串。

substring()方法從兩個指定索引之間的字符串中提取字符，並返回新的子字符串。

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

修改jQuery的塊：

$('.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這樣的隱藏文字，那就用一些技巧來實現它。現在很容易。

Answer 2

您應該看到控制檯中的錯誤，因爲this是DOM元素，而不是jQuery對象，所以this.attr()無效。

你真的想用你的方法是什麼來代替：

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

隨着

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