代码之家 › 专栏 › 技术社区 › Dan TheCodeJunkie

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

arrays jquery

Dan TheCodeJunkie · 技术社区 · 14 年前

我似乎不能优雅地这样做,我也不明白我看到的一些行为。

我将数组存储在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", ","]

4 回复 | 直到 11 年前

Nick Craver 14 年前

您可以使用 .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(',');
});

You can test it out here ,在每种情况下,我们都将字符串值转换为数组,操作数组,然后将其转换回字符串。另一种选择是始终处理数组,然后在需要时将其转换为字符串,例如 $("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');

You can test that version here

LukeH 14 年前

隐藏字段的值是字符串,而不是数组。这个 grep 函数将该字符串视为一个字符数组,其中 , 字符没有任何特殊含义,它只是数组中的另一个元素。

要将字符串视为逗号分隔的值数组,在处理之前需要使用JavaScript split 功能。完成数组后,可以使用 join 在将字符串写回隐藏字段之前。

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

Raftalks 14 年前

这种方法也许能帮助你。尝试以下函数删除该值并获取结果

function removeVal(list, value) {
  list = list.split(',');
  list.splice(list.indexOf(value), 1);
  return list.join(',');
}

removeVal('1,2,3', '2'); 
//result "1,2"

若要添加值,请首先发送使用以下函数

function addVal(list, value){
 list = list + value;
return list;
}

addVal("1,2,3",",4"); //result 1,2,3,4

Alexis Abril 14 年前

保持当前的值设置不变,可以按如下方式添加/删除值:

要添加值:

$input = $("input");

var array = $input.val().split(",");
array.push(7,8,9);
$input.val(array);

要删除值:

$input = $("input");

var array = $input.val().split(",");
array = $.grep(array, function(n, i) { return n !== "13"; });//"13" can be any value or variable you choose.
$input.val(array);

Short demo here.

但是,如果能够更改隐藏字段值的格式,则可以使用jQuery中的data()方法或metadata()插件(如果选择):

//Using metadata() with html5 attributes

//Markup

<input type="hidden" id="myField" data-value="[1,2,3,5,8,13]">

//JS

var $input = $("input");

$.metadata.setType("html5");
$input.metadata().value.push(7,8,9);

元数据部分未经测试,但您可以将元素作为对象而不是字符串进行交互。不需要拆分;)