0

我正在尝试使用 jquery 构建一个简单的表单。通过构建一个表单,我的意思是我正在根据单击的按钮将准备发布的输入放在一起。

所以例如我可能有一个像这样的变量......

var1 = "<input type='text' value='some product' />";

单击相关按钮时,会将 html 附加到更多相同的内容。有点像购物车。

我遇到的问题是,我需要按顺序对它们进行编号,以便将输入添加到列表中时,它会创建相关的索引号,因此最终会

<input id="number1" type="text" />
<input id="number2" type="text" />
<input id="number3" type="text" />
<input id="number4" type="text" /> etc etc...

这很简单,我只是使用了 var = count++ 当我想要能够从列表中删除一个项目时,问题就来了。我正在使用 $(this).parents('tr').remove(); 将它们从列表中删除。

但是,当您从列表中间删除一个时,数字不是连续的。所以我的问题是如何保持这些数字连续。是我首先添加数字的方式,还是有一种方法可以“重新访问”count变量的先前实例?

我真的不能举一个我在这里尝试过的例子,因为我完全不知所措。我已经搜索了互联网,但我不确定什么是可能的。

我在这里并不懒惰,只是想找人提供解决方案,但如果你能指出我正确的方向,那就太好了。

4

1 回答 1

0

实际上,我发现这个问题很有趣,所以我花了一些时间来创建答案。

我认为一个特殊的 jquery 插件可以在这里帮助你,我在下面发布。用法示例在这个小提琴上:http: //jsfiddle.net/FJRNh/

它的工作方式:

  • 隔离“前缀”部分 - 在您的案例编号中
  • 查找 id 以前缀开头的所选元素的所有兄弟姐妹
  • 删除需要的元素
  • 重新编号兄弟姐妹

它有一个缺点 - 它会对所有具有相同前缀的项目重新编号,即使它们之前没有编号,所以如果你有像 number1、number2、number3、number_foot 这样的 id,那么 number_foot 也会被重新编号。这可以通过在内部循环中添加正则表达式测试来避免。但是我相信如果您牢记这个限制,那么提供的代码就足够了

(function ($) {
    $.fn.renumberingRemove = function () {
        var $this = $(this);
        var mthisid = $this.attr('id');
        var name = $this[0].nodeName;
        var numberp = /\D+/.exec($this.attr('id'));              
        var sibl = $this.parent().children(name+"[id^='"+numberp+"']");
        $this.remove();
        var istart = 1;
        sibl.each(function () {      
            if (this.id != mthisid) {
                $(this).attr('id', numberp + istart++);
            }
        });        
    };
})(jQuery);
于 2013-02-22T08:57:21.923 回答