jquery - この jquery コードが期待どおりに機能しないのはなぜですか?

Question

HTMLは次のとおりです。

<input type="text" id="name" /><input type="button" id="insert" value="Insert" />
<div id="display_list"></div>

そして、ここにjQueryコードがあります：

$(document).ready(function() {
    function display() {
        $('#display_list').text('');
        $.each(names, function(index, value) {
            $('#display_list').append(index + 1 + '. ' + value + '<br/>');
        });
    }
    var names = ['cow', 'alex', 'ram'];
    display();
    $('#insert').click(function() {
        var name = $('#name').val();
        names.push(name);
        display();
    });
});

問題はそれが表示されていることです

1. 牛
2. アレックス
3. RAM

最初は、入力で何かを入力して挿入ボックスをクリックすると、値は表示されませんが、次のようなインデックス番号が増分されます。

1. 牛
2. アレックス
3. RAM
4. 5.

Answer 1

$.trim()入力値が空でないことを確認するために使用できます。

 $('#insert').click(function(){
   var name= $.trim($('#name').val())
   if (name != "") {  
      names.push(name);
      display();
  } 
 });

デモ