AJAXを経由した再帰的なdivコンテンツの投稿と投稿

Question

いくつかのdivの内容を読み込んで配列に格納する関数を作成しました。私のdivは、次のような組織化されている：

<div class="row clearfix" id="moltiplicandum1"> 
    <div class="column third"> 
     <select id="test_set" type="text" style="width:100%"> 
      <option selected disabled value="">Select...</option> 
      <option value="set1">set1</option> 
      <option value="set2">set2</option> 
     </select> 
    </div> 
    <div class="column third"> 
     <select id="avail_cat" type="text" style="width:100%"> 
      <option selected disabled value="">Select...</option> 
      <option value="cat1">cat1</option> 
      <option value="cat2">cat2</option> 
     </select> 
    </div> 
    <div class="column third"> 
     <select id="avail_class" type="text" style="width:100%"> 
      <option selected disabled value="">Select...</option> 
      <option value="class1">class1</option> 
      <option value="class2">class2</option> 
     </select> 
    </div> 
</div> 
<div class="row clearfix" id="moltiplicandum#">...</div> 

moltiplicandum1から任意montiplicandum#に（すべてのボタンを使ってJSを経て作成されました）。ラインvar divs = div.getElementsByTagName('select');に

TypeError: div is null

：だから、それぞれ「moltiplicandum」のために、すべての「選択」の内容を読み取るために起こっている関数はエラーを返します。ここでは機能：

var divArray = []; 

for(var i = 1; i < 10; i++) { 
    var div = document.getElementById("moltiplicandum"+i); 
    var divs = div.getElementsByTagName('select'); 

    for (var j = 0; j < divs.length; j += 1) { 
     divArray.push($(divs[j]).val()); 
    } 
} 

私はvar i = 1を定義し、外部forコメントした場合、それは（唯一の "moltiplicandum1" のために）動作します。

誰かが問題を理解するのに役立つでしょうか？ありがとうございました

Answer 1

jqueryを使用している場合は、単にセレクタを使用しないでください。このように：

selectArray = Array.prototype.map.call($(".moltiplicandum select"),(function(el){ 
return el.value; 
}); 

Answer 2

あなたが示したコードが再帰またはAJAXのどちらと関係しているかわかりませんが、select要素からすべての値の配列を作成するという目標を考えれば、jQueryのmap()方法。

ロジックを汎用化できるように、共通のクラスをmoltiplicandumN要素に追加することもできます。 id属性を複製するように注意して、また

$('.moltiplicandum select').change(function() { 
 
    var selectArray = $('.moltiplicandum select').map(function() { 
 
    return this.value; 
 
    }).get(); 
 
    console.log(selectArray) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row clearfix moltiplicandum" id="moltiplicandum1"> 
 
    <div class="column third"> 
 
    <select id="test_set1" type="text" style="width:100%"> 
 
     <option selected disabled value="">Select...</option> 
 
     <option value="set1">set1</option> 
 
     <option value="set2">set2</option> 
 
    </select> 
 
    </div> 
 
    <div class="column third"> 
 
    <select id="avail_cat1" type="text" style="width:100%"> 
 
     <option selected disabled value="">Select...</option> 
 
     <option value="cat1">cat1</option> 
 
     <option value="cat2">cat2</option> 
 
    </select> 
 
    </div> 
 
    <div class="column third"> 
 
    <select id="avail_class1" type="text" style="width:100%"> 
 
     <option selected disabled value="">Select...</option> 
 
     <option value="class1">class1</option> 
 
     <option value="class2">class2</option> 
 
    </select> 
 
    </div> 
 
</div> 
 

 
<div class="row clearfix moltiplicandum" id="moltiplicandum2"> 
 
    <div class="column third"> 
 
    <select id="test_set2" type="text" style="width:100%"> 
 
     <option selected disabled value="">Select...</option> 
 
     <option value="set1">set1</option> 
 
     <option value="set2">set2</option> 
 
    </select> 
 
    </div> 
 
    <div class="column third"> 
 
    <select id="avail_cat2" type="text" style="width:100%"> 
 
     <option selected disabled value="">Select...</option> 
 
     <option value="cat1">cat1</option> 
 
     <option value="cat2">cat2</option> 
 
    </select> 
 
    </div> 
 
    <div class="column third"> 
 
    <select id="avail_class2" type="text" style="width:100%"> 
 
     <option selected disabled value="">Select...</option> 
 
     <option value="class1">class1</option> 
 
     <option value="class2">class2</option> 
 
    </select> 
 
    </div> 
 
</div>

：これを試してみてください。上記のHTMLのselectコントロールの繰り返しの数値をidに追加しました。