javascript - 在具有相同类的 div 内循环

Question

我试图在具有相同类名的 div 内循环。这是为了获得正确的查询字符串，我想稍后将其用于 getJSON 。问题是我无法从 div 中获取各种参数...

这是创建 div 的代码(这个工作正常，我用 Chrome 控制台检查过):

$(InputsWrapper).append('<div>' + '<div class="name" id="InputsWrapper_'+field.id+'">' + '<label>' +field.button_title+ ' </label>' +
         '<input type="text" name="mytext-'+field.titre+'" table='+field.table+' titre='+field.titre+' id="field_'+field.titre+'" placeholder="'+field.placeholder+'"/>' + ' ' + '<button class="removeclass3"> x </button>' + '<br>' + '</div>' + '</div>');
            $("body").on("click", ".removeclass3", function() {
            $(this).parent('div').remove(); // To Remove Filter
            return false;
            });
            $(InputsWrapperDisplay).append('<div>' + '<div class="name" table="'+field.table+'" titre="'+field.titre+'" id="InputsWrapperDisplay-'+field.id+'">' + '<label>' +field.button_title+'</label>' + ' ' + '<button class="removeclass3"> x </button>' + '</div>' + '</div>');
            $("body").on("click", ".removeclass3", function() {
            $(this).parent('div').remove(); // To Remove Display
            return false;
            });

<div id="InputsWrapper"></div>
<div id="InputsWrapperDisplay"></div>

<div class="name" id="InputsWrapper_TI"><label>TI </label><input type="text" name="mytext-TI" table="technical_item" titre="TI" id="field_TI" placeholder="Nom partiel ou complet"> <button class="removeclass3"> x </button><br></div>

这是应该修改 myjson 变量的代码:

var myjson = "http://****/get_json_test.php?callback=?";
  $('.name').each(function(i, obj){
     if(document.getElementById('field_'+obj.titre+'') != null){
        if(document.getElementById('field_'+obj.titre+'').value != null){
           myjson += '&mytext-'+obj.table+'|'+obj.titre+'=' + document.getElementById('field_'+obj.titre+'').value;
        }
     }
  });

  $('.display').each(function(i,obj){
     if(document.getElementById('InputsWrapperDisplay-'+obj.id+'') != null){
        myjson += '&'+obj.table+'|'+obj.titre+'';
     }
  });
  console.log(myjson);

我得到这个结果:“http://*****/get_json_test.php?callback=?”

有人知道为什么我没有在 myjson 中得到修改吗？

谢谢，科朗坦。

Answer 1

我认为问题出在这里:

$('.name').each(function(i, obj){
   if(document.getElementById('field_'+obj.titre+'') != null){
       ...
   }
});

您正在迭代所有 .name s，然后使用其 titre找到它的属性field_<titre>元素，但是你的div.name元素不包含任何 titre属性，请参见:

<div class="name" id="InputsWrapper_TI">...</div>

之后，您尝试访问 field_<titre>属性，但引用 .name元素(obj变量):

myjson += '&mytext-'+obj.table+'|'+obj.titre+'=' + document.getElementById('field_'+obj.titre+'').value;

<小时/>

要解决未修改的结果字符串问题，我建议使用以下解决方案(不需要对 html 进行任何更改):

$('.name').each(function(i, obj){
   var fieldElement = $(obj).find('input');
   if (fieldElement.length && fieldElement.val()) {
         myjson += '&mytext-' + fieldElement.attr('table') + '|' + fieldElement.attr('titre') + '=' + fieldElement.val();
   }
});