質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.51%

  • JavaScript

    20348questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    8138questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

クラスを回してテキストの数値を合計する。

解決済

回答 4

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 183

tkshp

score 96

前提・実現したいこと

テーブルの各セルに共通クラスを持たせて、そのクラスで回して、各セルの合計値を取得する方法のご教示をお願い致します。
エラー解決方法を知りたい為、eachメソッドのvalを使って、各セルのテキストの値を取得する方法を知りたいです。

該当のソースコード

    <table>
        <tr>
            <td class = "sample">10</td>
            <td class = "sample">20</td>
            <td class = "sample">30</td>
        </tr>
    </table>

試したこと

$(function(){
    var sample = $(".sample");
    var sum;
    sample.each(function(index, val){
        console.log(val);
        sum += val.text();
    });
    console.log("sum:"+sum);
});

・エラーメッセージ。

Uncaught TypeError: val.text is not a function
at HTMLTableCellElement.<anonymous>


valを出力したら、
<td class="sample">10</td>
となるので、
これで何故、val.text()でエラーが出てしまうのかわかりません。

追記

現状の全コードです。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>sample page</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="sample01.js"></script>
<!-- <link rel="stylesheet" type="text/css" href="sample01.css"> -->
</head>
<body>
    <table>
        <tr>
            <td class = "sample">10</td>
            <td class = "sample">20</td>
            <td class = "sample">30</td>
        </tr>
    </table>
</body>
</html>
$(function(){
    var sum;
    $(".sample").each(function(index, val){
        console.log($(val).text());
        sum += parseInt($(val).text(), 10);
    });
    console.log(sum);
});

・出力結果。

10
20
30
NaN
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 4

checkベストアンサー

+2

valを出力したら、
<td class="sample">10</td>

はい、これは単なる文字列です。
text()はあくまでjQueryの要素に対して使えるものなので

sum += $(val).text();

のようにきちんとjQueryの要素として扱う必要があります。

ただし、これでも実際に取得されるのは文字列です。
このままだと102030のように文字列連結されるだけになると思います。

「足し算を行いたい」のであればparseInt()を利用して文字列→数値の変換を行ってください。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/03/25 13:24

    ご回答ありがとうございます。
    sum += $(val).text();
    で出力すると、
    何故か、
    sum:undefined102030
    というふうにundefinedが出てきてしまって、そのせいか、
    sum += $(val).text().parseInt();
    だとエラーになってしまいます。
    ご教示いただけませんか?

    キャンセル

  • 2019/03/25 13:26

    parseInt() ちゃんと見ましたか?
    私はマニュアルへのリンクを貼ってます。

    キャンセル

  • 2019/03/25 13:35

    大変失礼しました。
    見てませんでした。
    拝見しました。
    $(function(){
    var sum;
    $(".sample").each(function(index, val){
    console.log($(val).text());
    sum += parseInt($(val).text(), 10);
    });
    console.log(sum);
    });
    で出力すると、NaNになってしまうのですが、
    parseIntの書き方をご教示いただけませんか?
    10
    20
    30
    NaN

    キャンセル

  • 2019/03/25 13:44 編集

    マニュアル、リファレンスは仕様ですのでどのような個人ブログや記事よりも確実な情報が載っています。何かあったときにはマニュアルです。

    そういえば、parseInt()の第2引数にあててる「10」ってどういう意図があってつけました?

    キャンセル

  • 2019/03/25 13:48 編集

    あと、初期値何も設定しない変数はまずいですよ。
    値なしの変数に何を足しても何も無しです。
    +=だから、「元の値に足しこむ(文字列の場合は継ぎ足す)」です。
    数値型なので余計にその影響が顕著に出ます。

    キャンセル

  • 2019/03/25 13:56

    ご回答ありがとうございます。
    すみません、こちらコメントに気づかず、ベストアンサーを他の人に付けてしまいました。
    数値の初期化が必要だったのですね。
    解決しました。
    ありがとうございました。

    キャンセル

  • 2019/03/25 13:58

    時間的には僅差ですし具体的なコードを提示したわけではないので
    直接の解決策が書いてあるほうに目が行くのは仕方がないことだと思います。
    解決されたようで何よりです。

    キャンセル

  • 2019/03/25 14:03

    ご回答ありがとうございます。
    そのように仰っていただけて安心しました。
    ありがとうございました。

    キャンセル

  • 2019/03/25 14:07

    ベストアンサーをさせていただいた回答者様から、移行のご意思をいただいたので、
    改めてベストアンサーにさせていただきました。
    ありがとうございました。

    キャンセル

+2

val.text()関連はほかの回答者さんが回答してくれているので、NaNになるところだけ回答します。


結論からいうとsumを初期化していないのが原因です。

$(function(){
    var sum;
    $(".sample").each(function(index, val){
        console.log($(val).text());
        sum += parseInt($(val).text(), 10);
    });
    console.log(sum);
});

↑にあるようにvar sumだけだと初期化されていないのでundefinedが入っている状態になっています。
そしてundefinedにたいして+=しているのでNaNになっているということです。

ですので、var sum = 0のように初期化するとNaNにならなくなります。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/03/25 13:53

    ご回答ありがとうございます。
    なるほど、var sum = 0のように初期化する必要があったのですね。
    解決しました。
    ありがとうございました。

    キャンセル

  • 2019/03/25 13:59

    私は他の回答者さんに付け足しただけの回答なのでBAは他の方のほうが個人的には有難いです。

    キャンセル

  • 2019/03/25 14:05 編集

    ご回答ありがとうございます。
    お気遣いありがとうございます。
    それでは、他の回答者様にベストアンサーを移させていただきたいと思います。
    ありがとうございました。

    キャンセル

  • 2019/03/25 14:08

    今回は変数の初期化が正しく行われなかったことが最も大きな問題だと思いますので(私も途中で気づきました)、そういった意味ではこちらがベストアンサーとしては相応しいと思ってます(あくまで私個人の感覚なので質問者さんにお任せしますが)

    キャンセル

  • 2019/03/25 14:08

    と書いてたら変わってた。
    いずれにしても解決につながったようで良かったです。

    キャンセル

0

どういうわけか、jQueryのeachでjQueryオブジェクトを回すと、DOMオブジェクトが渡ってきます(公式)。

なので、

  • 生のDOMにある.textContentでテキストを抽出する
  • jQueryを使いたい場合、$(val).text()のようにjQueryオブジェクトに変換する

といった手段が必要となります。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/03/25 13:18

    ご回答ありがとうございます。
    $(function(){
    var sample = $(".sample");
    var sum;
    sample.each(function(index, val){
    console.log(val);
    sum += $(val).text();
    });
    console.log("sum:"+sum);
    });
    としたのですが、
    sum:undefined102030
    という結果になりまして、
    何故、undefinedが出てきてしまうのかわからないのですが、
    ご教示いただけませんか?

    キャンセル

  • 2019/03/25 13:31

    この表以外のところに、.sampleクラスの入った要素はありませんか?

    キャンセル

  • 2019/03/25 13:40

    ご回答ありがとうございます。
    現状の全コードを追記しました。

    キャンセル

  • 2019/03/25 13:57

    ご回答ありがとうございます。
    sumを初期化をしていなかった為、最初にundefinedが付いていたようです。
    解決しました。
    ご教示ありがとうございました。

    キャンセル

0

<script>
window.addEventListener('DOMContentLoaded', function(e){
  var v=[].map.call(document.querySelectorAll('.sample'),function(x){
    return parseFloat(x.textContent);
  }).reduce(function(prev,current){
    return prev+current;
  });
  console.log(v);
});
</script>

<table>
<tr>
<td class = "sample">10</td>
<td class = "sample">20</td>
<td class = "sample">30</td>
</tr>
</table>

NaN対応

<script>
window.addEventListener('DOMContentLoaded', function(e){
  var v=[].map.call(document.querySelectorAll('.sample'),function(x){
    return parseFloat(x.textContent)||0;
  }).reduce(function(prev,current){
    return prev+current;
  });
  console.log(v);
});
</script>

<table>
<tr>
<td class = "sample">10</td>
<td class = "sample">20</td>
<td class = "sample">30</td>
<td class = "sample">abc</td>
</tr>
</table>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/03/25 13:54

    ご回答ありがとうございます。
    勉強になりました。
    ありがとうございました。

    キャンセル

同じタグがついた質問を見る

  • JavaScript

    20348questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    8138questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。