<div id="divholder">
{%for i in volcanoinfo%}
<div class="volcdiv">
<p id="volcanoname" style="display: none;">{{ i['name'] }}</p>
<p id="volcanolat" style="display: none;">{{ i['vlat'] }}</p>
<p id="volcanolon" style="display: none;">{{ i['vlng'] }}</p>
</div>
{%endfor%}
</div>
首先,使用 json 檔案生成 div,然后我希望生成一個字典,其中包含每個 div 的名稱、緯度和經度。
我試過在字典中運行一個 for 回圈,但我真的不知道我在做什么。是否可以創建這本詞典?我有一個使用創建的陣列
var div = document.getElementById('divholder');
var volcdiv = div.getElementsByTagName('p')
var divs = div.getElementsByTagName('div');
var divArray = [];
for (var i = 0; i < divs.length; i = 1) {
divArray.push(volcdiv[i].innerHTML);
console.log(divArray)
}
所以我知道可以檢索所有資料。現在有沒有辦法形成這本字典?干杯
uj5u.com熱心網友回復:
嘗試遍歷 div 并使用查詢選擇器獲取每個值并將結果作為物件推送到結果陣列
var div = document.getElementById('divholder');
var divs = div.getElementsByClassName('volcdiv');
var divArray = [];
for (var i = 0; i < divs.length; i = 1) {
console.log(divs[i])
var volcanoname = divs[i].querySelector('[id="volcanoname"]').innerHTML
var volcanolat = divs[i].querySelector('[id="volcanolat"]').innerHTML
var volcanolon = divs[i].querySelector('[id="volcanolon"]').innerHTML
divArray.push({"volcanoname":volcanoname, "volcanolat": volcanolat, "volcanolon": volcanolon });
}
document.getElementById("result").value = JSON.stringify(divArray);
<div id="divholder">
<div class="volcdiv">
<p id="volcanoname" >1</p>
<p id="volcanolat" >11</p>
<p id="volcanolon" >111</p>
</div>
<div class="volcdiv">
<p id="volcanoname" >2</p>
<p id="volcanolat" >22</p>
<p id="volcanolon" >222</p>
</div>
<input type="text" id="result"/>
</div>
https://jsfiddle.net/uwdczrh0/2/
轉載請註明出處,本文鏈接:https://www.uj5u.com/shujuku/517780.html
標籤:javascript烧瓶
