Question

我试图在具有相同类名的div中循环。它是为了获得我想在之后用于getJSON的正确查询字符串。问题是我无法从div中得到各种论点......

以下是创建div的代码（这个工作正常，我使用Chrome控制台检查）：

＆＃13;

$(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;
            });

＆＃13;

<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>

＆＃13;

这是应该修改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);

我得到了这个结果：＆＃34; http：//******/get_json_test.php？callback =？＆＃34;

有谁知道为什么我不能在myjson中进行修改？

谢谢， Corentin。

Answer 1

我认为问题在于：

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

您正在遍历所有.name，然后使用其titre attibute查找其field_<titre>元素，但您的div.name元素不包含任何titre元素1}}属性，请参阅：

<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();
   }
});

Answer 2

在每个人中你获得了一个jQuery元素，它不会有来自你的数据源的titre或table属性。

您可以将这些属性添加为dom数据属性，并在后面使用它们。

像：

var field = {id:50,button_title:'demo',titre:'foo', placeholder: 'bar', table: 'tab'}

$('#InputsWrapper').append('<div>' + '<div class="name" id="InputsWrapper_'+field.id+'" data-titre="'+field.titre+'" data-table="'+field.table+'">' + '<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;
            });

演示：http://jsfiddle.net/6ym3e0eL/

但请考虑：

以更加可持续的方式构建动态HTML
避免混合使用jQuery和vanilla代码来访问DOM

在具有相同类的div中循环

2 个答案: