文字数を制限して「...もっと見る」を表示させたい

Question

前提・実現したいこと

jSで文字数を縛って最後に「...もっと見る」という文言を表示させたい

発生している問題・エラーメッセージ

1つ目はうまく表示されるが2つ目以降に適応されない

該当のソースコード

$(function(){
var read = document.getElementsByClassName('read').item(0);
var text = read.innerHTML;
var text50 = text.substr(0,50);
var textRemain = text.substr(50);
if (textRemain != '') {
read.innerHTML = text50
+ '<span style="display:none;" class="more">'
+ textRemain
+ '</span>'
+ '<span class="text" style="font-weight:bold;" .style.display='inline';">'
+ '...もっと読む'
+ '</span>';
}
});

試したこと

探して持ってきたときは下記コードのclass部分がIDになっていたためclassに変更してみましたが上記に書いている通り、１つ目だけ適応して2つ目以降は「...もっと見る」の文言も表示されない、文字数も制限できなていないという状況です

• '<span style="display:none;" class="more">'

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

.item(0)で1つ目のみ処理しているので当然2つ目は処理されません。forなどを使ってそれぞれの要素を個別に処理しましょう。

【getElementsByClassNameとgetElementByIdの返り値の違い - Qiita】
https://qiita.com/rindarinda5/items/c26dc81fe8cd98992dc1

Comments

[Peeetaro]

ご回答ありがとうございます。
参考にいただいたサイトを見ながら下記のようにコードを変更してみたところ1つ目以降にも適応されるようになりました。
$(function(){
for (var i = 0; i < 10; i++) {
var read = document.getElementsByClassName('read').item(i);
var text = read.innerHTML;
var text50 = text.substr(0,50);
var textRemain = text.substr(50);
if (textRemain != '') {
read.innerHTML = text50
+ '<span style="display:none;" class="more">'
+ textRemain
+ '</span>'
+ '<span class="text" style="font-weight:bold;" .style.display=\'inline\';">'
+ '...もっと読む'
+ '</span>';
}
}
});

ですが、for (var i = 0; i < 10; i++)の'10'という数字を入力している部分を'read'に変更してみたんですがうまく表示ができませんでした。
（readにしたい理由としては'read'とclass名をつけている部分全てでループさせたかったからです）

何かご教授いた開けると幸いです。
よろしくお願い致します。

[kei344]

var items = document.getElementsByClassName('read');
for (var i = 0; i < items.length; i++) {
var read = items[i];
/*略*/}

[Peeetaro]

ありがとうございます！
ご教授いただいた内容で思っている表示にすることができました！