Question

我正在尝试使用jQuery的Every函数迭代3个文本输入并将每个值的值放入数组中。我的代码不起作用。相反，它只添加第一个输入的值，并且这样做了3次。因此得到的数组是：球员= ['鲍勃'，'鲍勃'，'鲍勃']

代替：球员= ['Bob'，'Tom'，'Ziggy'];

我知道它有一些事情要做，因为每个输入项没有应用索引，但不知道如何解决这个问题。

标记是这样的：

<input type="text" class="player" id="player1" value="Bob" /><br>
<input type="text" class="player" id="player2" value="Tom" /><br>
<input type="text" class="player" id="player3" value="Ziggy" /><br>
<input type="submit" id="submit" value="submit" />

Js就是这样：

var players = [];

$('#submit').click(function(){
    $.each($('input.player'), function(index){
    var pName = $('input.player').val();
    //var pName = index.val(); tried this too
        players.push(pName);
        console.log(index);
        console.log(players);

    });

Answer 1

在.each()内，您需要使用$(this)来访问当前元素：

var players = [];

$('#submit').click(function(){
  $.each($('input.player'), function(index){
    var pName = $(this).val();
    players.push(pName);
    console.log(index);
    console.log(players);
  });
});

请注意，这相当于您的.each()功能，IMO更易于阅读：

$('input.player').each(function(index){
    var pName = $(this).val();
    players.push(pName);
    console.log(index);
    console.log(players);
});

据Ozan说：

您还可以使用$ .each（）
的回调函数的第二个参数

jQuery docs同意：

类型：函数（整数索引，元素元素）

$('input.player').each(function(index, element){
    var pName = $(element).val(); // Note the changed line here
    players.push(pName);
    console.log(index);
    console.log(players);
});

Answer 2

忽略其他所有内容，只关注明显存在问题的界限：

var pName = $('input.player').val();

这条线做什么？它为您提供了第一个'input.player'元素的值（请参阅documentation）。

而且，有趣的是，这正是您看到的结果：第一次输入的值一遍又一遍。

你的代码完全按照你的要求去做，但这不是你的意思。

在.each循环中，关键字this引用循环中的当前元素。由于它是原始DOM节点而不是jQuery对象，因此您需要将其包装为$(this) ...但由于您只获取其值，因此Vanilla JS版本{{1}将更有效地工作。

请参阅Nick Bull关于实际代码的答案，我只想概述一下如何自己处理调试代码。

jQuery的$ .each函数只重复添加第一项的val

2 个答案: