Length does not increase when obj[obj.length] = xx for array

It may be very rudimentary, but I don't understand, so let me ask you a question.

If you substitute the length of the array, the number of elements in the array increases.
I think the length value will also increase by one as shown below, but

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

as follows: Every time you type a number in the text box,
I wrote something that shows the total value of each row of the table.

html

<!DOCTYPE html>
<html>
  <head>
    <metacharset="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>Total </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

    // I don't think I'm included in the siblings.
    $inputs[$inputs.length] = $(this)[0];
    console.log($inputs[2]);//<input type="text" value=0>
    console.log($inputs.length);//2

    // The length value does not increase, so <=
    for (vari=0;i<=$inputs.length;i++){
      sum+=parseInt($inputs[i].value);
    }

    $(this).parent().siblings('.sum').text(sum);
  });
});

Like this

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

before and after

$inputs.length

Why does the value of remain the same?
Thank you for your cooperation.

javascript jquery

2022-09-30 18:46

3 Answers

jQuery's .children() returns the jQuery object instead of the array.Therefore, length is not reflected.

2022-09-30 18:46

Because $inputs is not an array.
You may want to check if it is an array as Array.isArray($inputs).

2022-09-30 18:46

As you wrote, length is not updated because it is a jQuery object, not an array, but there is also a method called .add() to add elements to the jQuery object.

In addition, the .andSelf() method can be used to include elements just before .sibling() this time.

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

  for (vari=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>Total </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>

2022-09-30 18:46

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656