遞歸讀取div內容並通過AJAX發佈

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全部創建）。所以，這是要讀的所有「選擇」的內容對每個「moltiplicandum」該函數返回一個錯誤：上線var divs = div.getElementsByTagName('select');

TypeError: div is null

。這裏的功能：

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

如果我評論的外部for，定義var i = 1，它的工作原理（僅適用於 「moltiplicandum1」）。

有人能幫我弄清楚這個問題嗎？謝謝1

Answer 1

如果您使用的是jQuery，爲什麼不直接使用選擇器？像這樣：

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

Answer 2

我不確定你所顯示的任何代碼與遞歸或AJAX有什麼關係，但是你的目標是構建一個select元素的所有值的數組，你可以簡單地使用jQuery map()方法。

您還可以將一個通用類添加到moltiplicandumN元素中，以便您可以對邏輯進行通用化。試試這個：

$('.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>

同時，應注意複製id屬性。我在上面的HTML中重複select控件的id中添加了一個數值。