3

すごい初歩的なことかもしれませんがわからなかったので質問させて下さい。

配列の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 

の値が変わらないのはなぜでしょうか。
よろしくお願いします。

2
  • 1
    @unarist さん、この質問は配列とjQueryオブジェクトを混同してしたところが質問の肝です。質問タイトル(質問内容の一部)を変えてしまうと、回答内容と辻褄が合わなくなるので、戻してもらえませんか?
    – sayuri
    Commented 2015年10月9日 22:05
  • @sayuri jQueryオブジェクトだからという結果に気をとられてしまいましたが、確かにそうですね。当該部分を元に戻しました。
    – unarist
    Commented 2015年10月10日 2:41

3 件の回答 3

3

jQueryの.children()が返すのは配列ではなくjQueryオブジェクトです。ですのでlengthも反映されません。

1
  • 読んでみてすごく理解できました。ありがとうございます。
    – r-naga
    Commented 2015年10月9日 9:38
3

$inputsが配列ではないためです。
Array.isArray($inputs)として配列かどうか確認してみるといいでしょう。

1
  • 確かに、Array.isArray($inputs) はfalseでした。ありがとうございます。
    – r-naga
    Commented 2015年10月9日 9:38
2

配列ではなくjQueryオブジェクトなので length が更新されない、というのは皆さんが書かれている通りですが、jQueryオブジェクトに要素を追加する .add() というメソッドも存在します。

さらに言えば「○○する前の要素セットを含める」という .andSelf() メソッドが、ちょうど今回の「.sibling() する前の要素を含める」に使えますね。

$('input').on('keyup', function() {
  var sum = 0;
  var $inputs = $(this).parent().siblings().andSelf().children('input');

  for (var i = 0; i < $inputs.length; i++) {
    sum += parseInt($inputs[i].value);
  }

  $(this).parent().siblings('.sum').text(sum);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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>
</table>

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。