选择两个特定标签之间的所有 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) => {

  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>

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) {

  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>

Answer 4

我认为如果可能的话最好重构你的 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>