Backbone.js 和 javascript 数组中的未定义值

Backbone.js and javascript undefined values in array

我正在练习 Backbone.js 但我认为我有一个基本的 JavaScript problem.I 在迭代循环结束获取输入时得到额外的未定义值 value.If 我做 myarr.push(kids[i].value) 并在完成时提醒它我得到一些额外的 commas.It 就像下一个数组项两边都有逗号加上前一个 item.I 的逗号我缺少一些 js 基础知识,但我不知道是什么问题,所以我可以回去学习它。

<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
  <script>
    function funk() {
      var myarr = new Array();
      var kids = document.getElementById("mydiv").children;

      for(var i = 0; i < kids.length; i++) {
        document.write(kids[i].value + "<br>");
      }    
    }
  </script>
</head>
<body>
  <button type="button" id="add">Add some</button>
  <button type="button" id="rem">Remove</button>

  <script>    
    var MyView =vBackbone.View.extend({
      tagName:'div',
      id:'mydiv',

      render: function() {
        this.$el.html("<input type='text' class='clickable' /><br>");
        return this;
      }   
    });

    var v = new MyView();
    $('body').append(v.render().el);

    $("#add").click(function() {
      $("#mydiv").append("<input type='text' class='clickable2' /><br>");
    });

    $("#rem").click(function() {
      $(".clickable2:last-of-type").remove();
    });
  </script>
  <button type="button" onclick="funk()">Submit</button>
  </body>
</html>

问题似乎是您假设 mydiv 元素的所有子元素都是您的输入之一……但事实显然并非如此。

呈现后,您的 mydiv 如下所示:

<div id="mydiv">
   <input type='text' class='clickable' /><br>
</div>

如果你点击几次你会得到这个:

<div id="mydiv">
   <input type='text' class='clickable' /><br>
   <input type='text' class='clickable' /><br>
   <input type='text' class='clickable' /><br>
</div>

请注意,#mydiv 元素有六个子元素(是的,br 标签也算在内)。 然后,您的 funk() 方法会迭代这些子项,并将每个子项的 .value() 方法添加到数组中。 br 标签的 .value() 调用 returns 什么都没有,所以这就是为什么你的数组输出中有 "empty" 个值。

如果您只想在数组中输入,请使用此选择器而不是获取 #mydiv 的子项:

$("#mydiv > input")

这将为您提供一组输入元素,所有这些元素都是#mydiv 元素的直接后代。随心所欲地处理该数组。