

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

配列のlength番目に代入すれば、その分配列の要素数も増えて  
以下のようにlengthの値も1増えると思うのですが、

javascript

[code]

    var array = ['A', 'B', 'C'];
    console.log(array.length); // 3
    
    array[array.length] = 'D';
    console.log(array.length); // 4
    console.log(array[3]); // D
    
[/code]

以下のような  
テキストボックスに数値を入力する度に  
テーブルの行毎の合計値を表示するものを書いてみたのですが、

html

[code]

    <!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>
    
[/code]

hoge.js

[code]

    $(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);
      });
    });
    
[/code]

このように

[code]

    $inputs[$inputs.length] = $(this)[0]; 
    
[/code]

の前後で

[code]

    $inputs.length 
    
[/code]

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


CC BY-SA 3.0
2015-10-09T08:56:52.200
17475
2015-10-10T02:40:00.897
2015-10-10T02:40:00.897
8000
10954
question
javascript jquery
配列に対して obj[obj.length]=xx としてもlengthが増えない


jQueryの[.children()](https://api.jquery.com/children/)が返すのは配列ではなく[jQueryオブジェクト](http://api.jquery.com/Types/#jQuery)です。ですので`length`も反映されません。


CC BY-SA 3.0
2015-10-09T09:22:20.457
17477
2015-10-09T09:22:20.457
4236
17475
answer


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


CC BY-SA 3.0
2015-10-09T09:23:46.083
17478
2015-10-09T09:23:46.083
12695
17475
answer


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

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

[code]

    $('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);
    });
[/code]

[code]

    <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>
[/code]


CC BY-SA 3.0
2015-10-09T16:46:39.420
17485
2015-10-09T16:46:39.420
8000
17475
answer