如何使用JQuery从存储在隐藏字段中的数组添加和删除项目

Question

我似乎无法以优雅的方式做到这一点,我不明白我所看到的一些行为.

我把我的数组存储在html中,如下所示:
<input type="hidden" id="myField" value="1,2,3,5,8,13">

要添加一个值,我必须这样做,这真的是最干净的方法吗？

$('#myField').val($('#myField').val() + ',' + 21);

为了消除我的价值,我必须做这样的事情:

newValues=$.grep($('#myField').val(), function(value) {  
        return value != 3;  
     });  
      $('#myField').val(newValues);

除此之外不起作用.....因为我得到了与此处所示相同的行为:

如果我这样做:

$.grep('1,2,3',function(value){return value!=3;})

它返回这个,为什么我得到这些额外的空白元素？如何从隐藏输入中删除3？:

["1", ",", "2", ","]

Answer 1

您可以使用.split()和将其视为数组.join(),例如添加值:

$("#myField").val(function(i, v) {
  var arr = v.split(',');
  arr.push('21');
  return arr.join(',');
});

或删除一个:

$("#myField").val(function(i, v) {
  return $.grep(v.split(','), function(value) {  
           return value != 3;  
         }).join(',');
});

您可以在这里测试它,在每种情况下我们都将字符串值转换为数组,操作数组,然后将其转换回字符串.另一种方法是始终处理数组,然后在需要时将其转换为字符串,例如在$("form").submit(...)提交表单之前.

如果你在这个地方做这个,你可以把它重新写成一个插件,如下所示:

jQuery.fn.extend({
    addToArray: function(value) {
        return this.filter(":input").val(function(i, v) {
           var arr = v.split(',');
           arr.push(value);
           return arr.join(',');
        }).end();
    },
    removeFromArray: function(value) {
        return this.filter(":input").val(function(i, v) {
           return $.grep(v.split(','), function(val) {  
                    return val != value;
                  }).join(',');
        }).end();
    }
});

您的调用看起来像这样(如果需要可链接):

$("#myField").addToArray('21');
$("#myField").removeFromArray('3');

你可以在这里测试那个版本