选择两个特定标签之间的所有 html 内容并将它们存储在 javascript 对象中

Question

我在 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？感谢您的答复。

Answer 1

要在 jQuery 中实现此目的，您可以使用map()和nextUntil()构建一个包含所需对象的数组。然后，您可以使用检索到的元素的类和内容来填充这些对象。尝试这个：var data = $('.personal-datas').map((i, el) => {&nbsp; var obj = {};&nbsp; $(el).nextUntil('.personal-datas').each((i, el) => obj[el.className] = el.innerText);&nbsp; 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">&nbsp; <div class="personal-datas">Datas</div>&nbsp; <h2 class="name">Jack Bauer</h2>&nbsp; <div class="date-of-birth">february the 9th 1984</div>&nbsp; <h3 class="company">Jane Ventures</h3>&nbsp; <h5 class="status">married</h5>&nbsp; <p class="country">Canada</p>&nbsp; <div class="personal-datas">Datas</div>&nbsp; <h2 class="name">Clarice Sterling</h2>&nbsp; <div class="date-of-birth">3rd of March 1981</div>&nbsp; <h3 class="company">FBI</h3>&nbsp; <h3 class="chasing">Buffalo Bill</h3>&nbsp; <h3 class="skill">Profiler</h3>&nbsp; <h5 class="status">Bachelor</h5>&nbsp; <p class="country">USA</p></div>

Answer 2

您可以使用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>

Answer 3

最好将带有数据属性的 HTML 放在 div 中。在下面的代码中，我们将所有字段包含在personal-data.这样我们就可以循环遍历所有元素并动态分配它们的属性。我们不需要手动访问每个属性。document.getElementById("js").onclick = function(e) {&nbsp; var data = document.querySelectorAll(".personal-datas");&nbsp; for (i = 0; i < data.length; i++) {&nbsp; &nbsp; var elements = data[i].querySelectorAll("*");&nbsp; &nbsp; var objectCollection = [];&nbsp; &nbsp; var newObject = {};&nbsp; &nbsp; for (j = 0; j < elements.length; j++) {&nbsp; &nbsp; &nbsp; if (elements[j].getAttribute("class") != null) {&nbsp; &nbsp; &nbsp; &nbsp; newObject[elements[j].getAttribute("class")] = elements[j].innerHTML;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; objectCollection.push(newObject);&nbsp; &nbsp; newObject = {};&nbsp; }&nbsp; var json = JSON.stringify(objectCollection);&nbsp; console.log(json);}<button id="js">CLICK ME</button><div class="personal-datas">&nbsp; Datas <br>&nbsp; <h2 class="name">Jack Bauer</h2>&nbsp; <div class="date-of-birth">february the 9th 1984</div>&nbsp; <h3 class="company">Jane Ventures</h3>&nbsp; <h5 class="status">married</h5>&nbsp; <p class="country">Canada</p></div><div class="personal-datas">&nbsp; Datas <br>&nbsp; <h2 class="name">Clarice Sterling</h2>&nbsp; <div class="date-of-birth">3rd of March 1981</div>&nbsp; <h3 class="company">FBI</h3>&nbsp; <h3 class="chasing">Buffalo Bill</h3>&nbsp; <h3 class="skill">Profiler</h3>&nbsp; <h5 class="status">Bachelor</h5>&nbsp; <p class="country">USA</p></div>

Answer 4

我认为如果可能的话最好重构你的 HTML，而且你的预期输出在语法上也不有效：var res = $("[data-personal=personal-datas]").map((_,el) => {&nbsp; var o = {};&nbsp; var personal = $(el).data('personal') + (_+1);&nbsp; o[personal] = {};&nbsp; $(el).find('*').each((_, dataEl) => {&nbsp; &nbsp; var p = $(dataEl).data('k');&nbsp; &nbsp; var v = $(dataEl).text();&nbsp; &nbsp; o[personal][p] = v;&nbsp; });&nbsp; 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">&nbsp; <h2 data-k ="name">Jack Bauer</h2>&nbsp; <div data-k ="date-of-birth">february the 9th 1984</div>&nbsp; <h3 data-k ="company">Jane Ventures</h3>&nbsp; <h5 data-k ="status">married</h5>&nbsp; <p data-k ="country">Canada</p></div><div data-personal ="personal-datas">&nbsp; <h2 data-k ="name">Clarice Sterling</h2>&nbsp; <div data-k ="date-of-birth">3rd of March 1981</div>&nbsp; <h3 data-k ="company">FBI</h3>&nbsp; <h3 data-k ="chasing">Buffalo Bill</h3>&nbsp; <h3 data-k ="skill">Profiler</h3>&nbsp; <h5 data-k ="status">Bachelor</h5>&nbsp; <p data-k ="country">USA</p></div>