jquery - .each 函数导致附加问题

Question

我正在尝试通读给定输入名称的列表，然后在跨度名称的 DIV 中检查这些输入名称。使用以下代码会导致复制问题..

$('.right').find(':input').each(function(){
       $(this).change(function(){
       var class_name ='';
       class_name = $(this).attr('name');  

       $('#specs').find('span').each(function(){ 

       if(class_name == $(this).attr('name')){
       //Update the current span with the information from input.

       }else{
       //Add span with class information  
       $('#specs').append("<span name='"+class_name+"'>"+class_name+"</span>");

       }

       });
  });

});

似乎发生的事情是每次添加一个跨度时，都会添加下一个添加的跨度+前一个跨度。

所以...

如果您在单击下一个输入字段时已经有 5 个跨度，则会添加 11 个跨度......而不仅仅是一个。

为什么会这样？

任何帮助都会很棒！

Answer 1

$(this).change(function(){

应该$('.right :input').change(function(){

你应该删除

$('.right').find(':input').each(function(){全部一起。

Answer 2

试试这样：

$('.right :input').on('change', function() {
    if ( $('span[name="'+ this.name +'"]').length ) { // span already exists
        $('span[name="'+ this.name +'"]').text(this.value);
    } else {
        var span = $('<span />', {name:this.name, text:this.value});
        $('#specs').append(span);
    }
});