すごい初歩的なことかもしれませんがわからなかったので質問させて下さい。
配列のlength番目に代入すれば、その分配列の要素数も増えて
以下のようにlengthの値も1増えると思うのですが、
javascript
var array = ['A', 'B', 'C']; console.log(array.length); // 3 array[array.length] = 'D'; console.log(array.length); // 4 console.log(array[3]); // D
以下のような
テキストボックスに数値を入力する度に
テーブルの行毎の合計値を表示するものを書いてみたのですが、
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="hoge.js"></script>
</head>
<body>
<table>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>合計</th>
</tr>
<tr>
<td>
<input type="text" value=0>
</td>
<td>
<input type="text" value=0>
</td>
<td>
<input type="text" value=0>
</td>
<td class="sum">
0
</td>
</tr>
<tr>
<td>
<input type="text" value=0>
</td>
<td>
<input type="text" value=0>
</td>
<td>
<input type="text" value=0>
</td>
<td class="sum">
0
</td>
</tr>
</table>
</body>
</html>
hoge.js
$(function(){
$('input').on('keyup', function() {
var sum = 0;
var $inputs = $(this).parent().siblings().children('input');
console.log($inputs[2]); // undefined
console.log($inputs.length); // 2
// siblings は自分は含まれないようなので
$inputs[$inputs.length] = $(this)[0];
console.log($inputs[2]); // <input type="text" value=0>
console.log($inputs.length); // 2
// lengthの値が増えないので <=
for (var i = 0; i <= $inputs.length; i++) {
sum += parseInt($inputs[i].value);
}
$(this).parent().siblings('.sum').text(sum);
});
});
このように
$inputs[$inputs.length] = $(this)[0];
の前後で
$inputs.length
の値が変わらないのはなぜでしょうか。
よろしくお願いします。