jQueryのeachの使い方がいまいちわかっていない

Question

前提・実現したいこと

ここに質問の内容を詳しく書いてください。

それぞれの野菜の文字数に合わせてwidthを変えたいのですが、
合計の文字数が出力されてしまいます。
どうしたらいいでしょうか。。。

■■な機能を実装中に以下のエラーメッセージが発生しました。

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

エラーメッセージ

該当のソースコード

        $(function () {
            $('.txtlength').each(function(){
            var yasaiTxt = $('.txtlength').length);
              $(this).css('width',yasaiTxt + 'em');
            });

        });

試したこと

ここに問題に対して試したことを記載してください。

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

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

Answer 1

野菜の文字数に合わせて

野菜はどこにあるねん
野菜の文字数教えてくれって質問で野菜がないってどういうことやねん

ツッコミはさておき見ていきましょう。
まずはeachの使い方からおさらい。

• 公式リファレンス
• 日本語1.9のリファレンス ちょっと古いですがjQueryの使い方自体はそんなに変わってないので、まぁまぁそのままいけます

書式はjQueryObject.each( function(index, Element) )です。
jQueryオブジェクトはDOMツリーを検索した結果の、
擬似的な「要素の配列」といった存在のオブジェクトを指します。

eachという英単語を翻訳すると「各々」といった感じの意味で、
この配列として取れたDOM君すべてに、各々この関数を実行しなさいといった感じの命令となります。
したがって、引数は「各々で実行する」を満たす為に必要な情報が格納されます。

• 第一引数index: 0から始まる配列のindex値、jQuery.get(index)等としてアクセスできる
• 第二引数element: 配列の1要素、jQueryではなくDOM APIの正式なElementを指す

---

この前提条件をJSのコードを見ていきましょう。
※HTMLがわからないので完全にヤマカンです。

$(function () {
  $('.txtlength').each(function(){
    var yasaiTxt = $('.txtlength').length);
    $(this).css('width', yasaiTxt + 'em');
  });
});

要点は.txtlengthです。
jQueryは$(CSSセレクタ)でDOMツリーを検索して対象となるDOMを見つけて配列(jQueryオブジェクト)として返してくれます。
つまり、ドットで始まる.txtlengthはクラス名ということがわかります。

なら現状のHTMLはこんな感じにしてるんじゃないですかね？

<ui class="vegetables">
  <li>
    <h3>水菜</h3>
    <span class="txtlength" style="display: none;">2</span>
  </li>
  <li>
    <h3>大根</h3>
    <span class="txtlength" style="display: none;">2</span>
  </li>
</ui>

もしそうなら子供要素の.txtlengthを検索してきて、
CSSの横幅をいじったとしても親要素のliとしては大したことないですよね？
$(this).parent().css()みたいな感じで親のブロック要素を直接いじる必要が出てきます。

また、JavaScriptの世界では文字列はtext.lengthという風に.lengthで文字数を取得出来ますので、
「水菜」の横に「Radish」等と日本語と英語がごちゃ混ぜでない限りは野菜名のみで上手くいくでしょう。
したがってtxtlengthという文字数だけを格納したタグは不要です。

上記のHTML想定ですが、セレクタは.vagetables liにしましょう。
コードに落とし込むとこんな感じになります。

<ui class="vegetables">
  <li>
    <h3>水菜</h3>
  </li>
  <li>
    <h3>大根</h3>
  </li>
</ui>

$(function () {
  $('.vagetables li').each(function(){
    var yasaiTxt = $(this).find('h3').text();
    $(this).css('width', yasaiTxt.length + 'em');
  });
});

Comments

[jiplog]

めちゃくちゃ詳しいご対応ありがとうございます！
多分ここの方ならこの程度の質問であれば、html部分はなくてもわかるだろうと思って省略してしまいました。すいません！
（実質思った通りのすごい方が回答してくださっております！）

横並びでflexでwrapしないで並べたかったのですが、幅を一番長い文字数で合わせると幅がどんどん長くなってしまうので名前に合わせてそれぞれの文字数に合わせて li の幅を自動で出力して欲しかったのです。

助かりました！ありがとうございます！

Answer 2

こうでは？

// var yasaiTxt = $('.txtlength').length);
//                  ↓        ↓         ↓
   var yasaiTxt = $(this).text().length;

Comments

[jiplog]

迅速なお答えありがとうございます！！！
助かりました！！！