我在 html 中有這樣的東西：<div class ="personal-datas">Datas</div><h2 class ="name">Jack Bauer</h2><div class ="date-of-birth">february the 9th 1984</div><h3 class ="company">Jane Ventures</h3><h5 class ="status">married</h5><p class ="country">Canada</p><div class ="personal-datas">Datas</div><h2 class ="name">Clarice Sterling</h2><div class ="date-of-birth">3rd of March 1981</div><h3 class ="company">FBI</h3><h3 class ="chasing">Buffalo Bill</h3><h3 class ="skill">Profiler</h3><h5 class ="status">Bachelor</h5><p class ="country">USA</p><div class ="personal-datas">Datas</div>我想選擇并在 JSON 文件中存儲帶有“個人數據”類的兩個標簽之間的所有內容，如下所示：{ "personal-datas1": { "name": "jack bauer", "date-of-birth": "february the 9th 1984", "company": "Jane Ventures", "status": "married", "country": "Canada" }, "personal-datas2": { "name": "Clarice Sterling", "date-of-birth": "3rd of March 1981", "company": "FBI", "chasing": "Buffalo Bill", "skill": "Profiler", "status": "Bachelor", "country": "USA" }}我如何繼續使用普通 JS 或 Jquery？感謝您的答復。
4 回答
婷婷同學_
TA貢獻1844條經驗 獲得超8個贊
要在 jQuery 中實現此目的，您可以使用map()和nextUntil()構建一個包含所需對象的數組。然后，您可以使用檢索到的元素的類和內容來填充這些對象。嘗試這個：
var data = $('.personal-datas').map((i, el) => {
var obj = {};
$(el).nextUntil('.personal-datas').each((i, el) => obj[el.className] = el.innerText);
return obj;
}).get();
console.log(data);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div class="personal-datas">Datas</div>
<h2 class="name">Jack Bauer</h2>
<div class="date-of-birth">february the 9th 1984</div>
<h3 class="company">Jane Ventures</h3>
<h5 class="status">married</h5>
<p class="country">Canada</p>
<div class="personal-datas">Datas</div>
<h2 class="name">Clarice Sterling</h2>
<div class="date-of-birth">3rd of March 1981</div>
<h3 class="company">FBI</h3>
<h3 class="chasing">Buffalo Bill</h3>
<h3 class="skill">Profiler</h3>
<h5 class="status">Bachelor</h5>
<p class="country">USA</p>
</div>
海綿寶寶撒
TA貢獻1809條經驗 獲得超8個贊
您可以使用document.getElementByClassName它返回一個類似數組的對象，更準確地說是一個HTMLCollection。
結果將按文檔順序返回（自上而下、深度優先遍歷）。
例如，在您的情況下，如果您document.The getElementsByClassName('name');
這樣做，將返回此訂單：
<h2?class?="name">Jack?Bauer</h2> <h2?class?="name">Clarice?Sterling</h2>
因此，通過將其用于所有類，您可以根據需要構建 JSON。
假設您有相同數量的元素，您可以執行以下操作：
const personalDatas = document.getElementsByClassName('personal-datas');
const names = document.getElementsByClassName('name');
const births = document.getElementsByClassName('date-of-birth');
const companies = document.getElementsByClassName('company');
const statuses = document.getElementsByClassName('status');
const countries = document.getElementsByClassName('country');
const finalJson = {};
for (let i = 0; i < personalDatas.length; ++i) {
? const key = 'personal-datas' + i;
? finalJson[key] = {};
? finalJson[key]['name'] = names[i].innerHTML;
? finalJson[key]['date-of-birth'] = births[i].innerHTML;
? finalJson[key]['company'] = companies[i].innerHTML;
? finalJson[key]['status'] = statuses[i].innerHTML;
? finalJson[key]['country'] = countries[i].innerHTML;
}
console.log(JSON.stringify(finalJson, null, 2));
<div class ="personal-datas">Datas</div>
<h2 class ="name">Jack Bauer</h2>
<div class ="date-of-birth">february the 9th 1984</div>
<h3 class ="company">Jane Ventures</h3>
<h5 class ="status">married</h5>
<p class ="country">Canada</p>
<div class ="personal-datas">Datas</div>
<h2 class ="name">Clarice Sterling</h2>
<div class ="date-of-birth">3rd of March 1981</div>
<h3 class ="company">FBI</h3>
<h3 class ="chasing">Buffalo Bill</h3>
<h3 class ="skill">Profiler</h3>
<h5 class ="status">Bachelor</h5>
<p class ="country">USA</p>
湖上湖
TA貢獻2003條經驗 獲得超2個贊
最好將帶有數據屬性的 HTML 放在 div 中。在下面的代碼中，我們將所有字段包含在personal-data.
這樣我們就可以循環遍歷所有元素并動態分配它們的屬性。我們不需要手動訪問每個屬性。
document.getElementById("js").onclick = function(e) {
var data = document.querySelectorAll(".personal-datas");
for (i = 0; i < data.length; i++) {
var elements = data[i].querySelectorAll("*");
var objectCollection = [];
var newObject = {};
for (j = 0; j < elements.length; j++) {
if (elements[j].getAttribute("class") != null) {
newObject[elements[j].getAttribute("class")] = elements[j].innerHTML;
}
}
objectCollection.push(newObject);
newObject = {};
}
var json = JSON.stringify(objectCollection);
console.log(json);
}
<button id="js">CLICK ME</button>
<div class="personal-datas">
Datas <br>
<h2 class="name">Jack Bauer</h2>
<div class="date-of-birth">february the 9th 1984</div>
<h3 class="company">Jane Ventures</h3>
<h5 class="status">married</h5>
<p class="country">Canada</p>
</div>
<div class="personal-datas">
Datas <br>
<h2 class="name">Clarice Sterling</h2>
<div class="date-of-birth">3rd of March 1981</div>
<h3 class="company">FBI</h3>
<h3 class="chasing">Buffalo Bill</h3>
<h3 class="skill">Profiler</h3>
<h5 class="status">Bachelor</h5>
<p class="country">USA</p>
</div>
12345678_0001
TA貢獻1802條經驗 獲得超5個贊
我認為如果可能的話最好重構你的 HTML，而且你的預期輸出在語法上也不有效：
var res = $("[data-personal=personal-datas]").map((_,el) => {
var o = {};
var personal = $(el).data('personal') + (_+1);
o[personal] = {};
$(el).find('*').each((_, dataEl) => {
var p = $(dataEl).data('k');
var v = $(dataEl).text();
o[personal][p] = v;
});
return o;
}).get();
console.log(res);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-personal ="personal-datas">
<h2 data-k ="name">Jack Bauer</h2>
<div data-k ="date-of-birth">february the 9th 1984</div>
<h3 data-k ="company">Jane Ventures</h3>
<h5 data-k ="status">married</h5>
<p data-k ="country">Canada</p>
</div>
<div data-personal ="personal-datas">
<h2 data-k ="name">Clarice Sterling</h2>
<div data-k ="date-of-birth">3rd of March 1981</div>
<h3 data-k ="company">FBI</h3>
<h3 data-k ="chasing">Buffalo Bill</h3>
<h3 data-k ="skill">Profiler</h3>
<h5 data-k ="status">Bachelor</h5>
<p data-k ="country">USA</p>
</div>
- 4 回答
- 0 關注
- 161 瀏覽
添加回答
舉報
0/150
提交
取消