Question

我希望在将数据发送到ajax帖子之前向数组中添加一些复选框信息，但是当它通过复选框循环时，它似乎会增加数组中的项目数量，但会使每个条目都在数组相同的内容。这是我的代码。

var aData = [];
var item = [];
$(".providers_chk").each(function (index, element) {
    if ($(this).attr("checked")) {
        item[0] = element.value;
        item[1] = element.name;
        aData.push(item);
        console.log(aData);
    }
});

对于每个条目，数组最终看起来像{＆＃34; foo＆＃34;，＆＃34; bar＆＃34;}，而不是{＆＃34; foo＆＃34;，＆＃34; bar＆＃ 34;}，{＆＃34; foo1＆＃34;，＆＃34; bar1＆＃34;}，{＆＃34; foo2＆＃34;，＆＃34; bar2}等

Answer 1

您正在回调函数中更新并推送相同的数组引用。而是在回调中使用局部变量或直接生成数组并推送到aData数组。

虽然你可以在回调中使用this引用元素，所以不需要使用回调参数。

var aData = [];
$(".providers_chk").each(function () {
  if (this.checked) { // check the checked property
     aData.push([this.value, this.name]);
   }
});

$('.providers_chk').change(function() {
  var aData = [];
  $(".providers_chk").each(function() {
    if (this.checked) {
      aData.push([this.value, this.name]);
    }
  });
  console.log(aData);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="abc" class="providers_chk" value="1" />
<input type="checkbox" name="abc" class="providers_chk" value="2" />
<input type="checkbox" name="abc" class="providers_chk" value="3" />
<input type="checkbox" name="abc" class="providers_chk" value="4" />
<input type="checkbox" name="abc" class="providers_chk" value="5" />
<input type="checkbox" name="abc" class="providers_chk" value="6" />
<input type="checkbox" name="abc" class="providers_chk" value="7" />

可以使用:checked伪类选择器删除if条件，这有助于仅选择已检查的元素。

var aData = [];

$(".providers_chk:checked").each(function () {
   aData.push([this.value, this.name]);
});

$('.providers_chk').change(function() {
  var aData = [];

  $(".providers_chk:checked").each(function() {
    aData.push([this.value, this.name]);
  });

  console.log(aData);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="abc" class="providers_chk" value="1" />
<input type="checkbox" name="abc" class="providers_chk" value="2" />
<input type="checkbox" name="abc" class="providers_chk" value="3" />
<input type="checkbox" name="abc" class="providers_chk" value="4" />
<input type="checkbox" name="abc" class="providers_chk" value="5" />
<input type="checkbox" name="abc" class="providers_chk" value="6" />
<input type="checkbox" name="abc" class="providers_chk" value="7" />

或者您可以使用jQuery.map方法和:checked伪类选择器来简化它。

var aData = $.map($(".providers_chk:checked"), function(e) {
  return [e.value, e.name];
});

$('.providers_chk').change(function() {
  var aData = $.map($(".providers_chk:checked"), function(e) {
    return [e.value, e.name];
  });
  console.log(aData);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="abc" class="providers_chk" value="1" />
<input type="checkbox" name="abc" class="providers_chk" value="2" />
<input type="checkbox" name="abc" class="providers_chk" value="3" />
<input type="checkbox" name="abc" class="providers_chk" value="4" />
<input type="checkbox" name="abc" class="providers_chk" value="5" />
<input type="checkbox" name="abc" class="providers_chk" value="6" />
<input type="checkbox" name="abc" class="providers_chk" value="7" />

Answer 2

将var item = [];移至if：

if ($(this).attr("checked")) {
    var item = [];
    item[0] = element.value;
    item[1] = element.name;
    aData.push(item);
    console.log(aData);
}

循环的每次迭代都在修改相同的 item数组。您推送到item的每个aData只不过是对同一var item的引用。

较短的选项是根本不创建临时变量：

if ($(this).attr("checked")) {
    aData.push([element.value, element.name]);
    console.log(aData);
}

以下是说明问题的示例：

＆＃13;

var item = ['foo'];   // Just like your `item`
var list = [];

while(list.length < 5)
  list.push(item);    // Add it to the list 5 times

console.log(JSON.stringify(list));

list[0][0] = 'bar';   // Edit the first `item` in the list's contents

console.log(JSON.stringify(list));

＆＃13;

item中的每个list只是对相同 var item的引用。

Answer 3

在您的代码中，您只使用一个数组进行推送，这会为每个循环获取新值。最后，当对结果数组传播对同一对象的引用时，您在所有推送数组中获得相同的值。

您可以动态创建数组，这些数组不是通过引用链接在一起的。

var aData = [];
$(".providers_chk").each(function (index, element) {
    if ($(this).attr("checked")) {
        aData.push([element.value, element.name]);
        console.log(aData);
    }
});

Answer 4

使用.map()函数根据选择器的每个匹配元素返回一个数组。在回调内部，您应该返回一个新数组，而不是重用代码中的相同数组。

var aData = $('.providers_chk:checked').map(function() {
    return [[this.value, this.name]];
}).get();

嵌套数组是必要的，因为jQuery会自动展平返回的数组，所以你必须将它包装在一个额外的级别，以便在最终结果中得到一个二维数组。

Answer 5

  var aData = [];
  $(".providers_chk").each(function (index, element) {
  if ($(this).attr("checked")) 
  {
    var item = new Object();
    item[0] = element.value;
    item[1] = element.name;
    aData.push(item);
    console.log(aData);
   }
  });

希望它能为你效劳：）

javascript push（）没有按预期工作

5 个答案: