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

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

  •  0
  • 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 年前
        1
  •  8
  •   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

        2
  •  1
  •   LukeH    14 年前

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

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

    var newValues = $.grep($('#myField').val().split(','), function(val) {  
        return val != 3;
    });  
    $('#myField').val(newValues.join(','));
    
        3
  •  0
  •   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
    
        4
  •  0
  •   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);
    

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