Q&A
ご回答ありがとうございます。
sum += $(val).text();
で出力すると、
何故か、
sum:undefined102030
というふうにundefinedが出てきてしまって、そのせいか、
sum += $(val).text().parseInt();
だとエラーになってしまいます。
ご教示いただけませんか？
前提・実現したいこと
テーブルの各セルに共通クラスを持たせて、そのクラスで回して、各セルの合計値を取得する方法のご教示をお願い致します。
エラー解決方法を知りたい為、eachメソッドのvalを使って、各セルのテキストの値を取得する方法を知りたいです。
該当のソースコード
html
1 <table> 2 <tr> 3 <td class = "sample">10</td> 4 <td class = "sample">20</td> 5 <td class = "sample">30</td> 6 </tr> 7 </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()でエラーが出てしまうのかわかりません。追記
現状の全コードです。
html
1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<title>sample page</title> 6<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 7<script src="sample01.js"></script> 8<!-- <link rel="stylesheet" type="text/css" href="sample01.css"> --> 9</head> 10<body> 11 <table> 12 <tr> 13 <td class = "sample">10</td> 14 <td class = "sample">20</td> 15 <td class = "sample">30</td> 16 </tr> 17 </table> 18</body> 19</html>
JavaScript
1$(function(){ 2 var sum; 3 $(".sample").each(function(index, val){ 4 console.log($(val).text()); 5 sum += parseInt($(val).text(), 10); 6 }); 7 console.log(sum); 8});
・出力結果。
10 20 30 NaN
回答4件
0
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 04:50
総合スコア180
0
ベストアンサー
<td class="sample">10</td>valを出力したら、
はい、これは単なる文字列です。
text()はあくまでjQueryの要素に対して使えるものなので
js
1sum += $(val).text();
のようにきちんとjQueryの要素として扱う必要があります。
ただし、これでも実際に取得されるのは文字列です。
このままだと102030のように文字列連結されるだけになると思います。
「足し算を行いたい」のであればparseInt()を利用して文字列→数値の変換を行ってください。
投稿2019/03/25 04:17
編集2019/03/25 04:18
総合スコア80850
parseInt() ちゃんと見ましたか？
私はマニュアルへのリンクを貼ってます。
大変失礼しました。
見てませんでした。
拝見しました。
$(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
マニュアル、リファレンスは仕様ですのでどのような個人ブログや記事よりも確実な情報が載っています。何かあったときにはマニュアルです。
そういえば、parseInt()の第2引数にあててる「10」ってどういう意図があってつけました？
あと、初期値何も設定しない変数はまずいですよ。
値なしの変数に何を足しても何も無しです。
+=だから、「元の値に足しこむ（文字列の場合は継ぎ足す）」です。
数値型なので余計にその影響が顕著に出ます。
ご回答ありがとうございます。
すみません、こちらコメントに気づかず、ベストアンサーを他の人に付けてしまいました。
数値の初期化が必要だったのですね。
解決しました。
ありがとうございました。
時間的には僅差ですし具体的なコードを提示したわけではないので
直接の解決策が書いてあるほうに目が行くのは仕方がないことだと思います。
解決されたようで何よりです。
ご回答ありがとうございます。
そのように仰っていただけて安心しました。
ありがとうございました。
ベストアンサーをさせていただいた回答者様から、移行のご意思をいただいたので、
改めてベストアンサーにさせていただきました。
ありがとうございました。
0
javascript
1<script> 2window.addEventListener('DOMContentLoaded', function(e){ 3 var v=[].map.call(document.querySelectorAll('.sample'),function(x){ 4 return parseFloat(x.textContent); 5 }).reduce(function(prev,current){ 6 return prev+current; 7 }); 8 console.log(v); 9}); 10</script> 11 12<table> 13<tr> 14<td class = "sample">10</td> 15<td class = "sample">20</td> 16<td class = "sample">30</td> 17</tr> 18</table>
NaN対応
javascript
1<script> 2window.addEventListener('DOMContentLoaded', function(e){ 3 var v=[].map.call(document.querySelectorAll('.sample'),function(x){ 4 return parseFloat(x.textContent)||0; 5 }).reduce(function(prev,current){ 6 return prev+current; 7 }); 8 console.log(v); 9}); 10</script> 11 12<table> 13<tr> 14<td class = "sample">10</td> 15<td class = "sample">20</td> 16<td class = "sample">30</td> 17<td class = "sample">abc</td> 18</tr> 19</table>
投稿2019/03/25 04:33
編集2019/03/25 05:08
総合スコア114829
0
どういうわけか、jQueryのeachでjQueryオブジェクトを回すと、DOMオブジェクトが渡ってきます（公式）。
なので、
- 生のDOMにある
.textContentでテキストを抽出する - jQueryを使いたい場合、
$(val).text()のようにjQueryオブジェクトに変換する
といった手段が必要となります。
投稿2019/03/25 04:14
総合スコア145183
ご回答ありがとうございます。
$(function(){
var sample = $(".sample");
var sum;
sample.each(function(index, val){
console.log(val);
sum += $(val).text();
});
console.log("sum:"+sum);
});
としたのですが、
sum:undefined102030
という結果になりまして、
何故、undefinedが出てきてしまうのかわからないのですが、
ご教示いただけませんか？
この表以外のところに、.sampleクラスの入った要素はありませんか？
ご回答ありがとうございます。
現状の全コードを追記しました。
ご回答ありがとうございます。
sumを初期化をしていなかった為、最初にundefinedが付いていたようです。
解決しました。
ご教示ありがとうございました。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/03/25 04:53
2019/03/25 04:59
2019/03/25 05:05 編集
2019/03/25 05:08
2019/03/25 05:08