使用jQuery动态创建JSON时控制台输出空数组的问题求助

问题原因 #

• 缺少匹配的DOM元素：当前HTML仅引入了jQuery库，没有定义class="email"的<input>元素，jQuery选择器$("input[class=email]")返回空集合，循环未执行，因此最终输出空数组。
• 循环内this指向错误：普通for循环中的this默认指向全局window对象，无法获取到input元素的title和value属性，即使补充了对应DOM元素也取不到正确值。

修复方案 #

1. 补充HTML的input元素

<input type="email" class="email" title="用户1" value="user1@test.com">
<input type="email" class="email" title="用户2" value="user2@test.com">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

2. 修正JS逻辑（两种写法可选）

原生for循环写法

function createJSON() {
  var obj = [];
  var elems = $("input[class=email]");
  
  for (i = 0; i < elems.length; i += 1) {
    // 通过索引获取当前遍历的元素
    var current = elems[i];
    var id = current.getAttribute('title');
    var email = current.value;
    tmp = {
      'title': id,
      'email': email
    };
    obj.push(tmp);
  }
  
  var jsonString = JSON.stringify(obj);
  console.log(jsonString);
}

createJSON();

jQuery each简化写法

function createJSON() {
  var obj = [];
  // 直接用each遍历匹配到的元素，回调内this指向当前元素
  $("input.email").each(function() {
    obj.push({
      title: this.getAttribute('title'),
      email: this.value
    })
  })
  console.log(JSON.stringify(obj));
}

createJSON();

内容的提问来源于stack exchange，提问作者skkh