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

4回答

婷婷同学_

要在 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>

0 0

海绵宝宝撒

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

0 0

湖上湖

最好将带有数据属性的 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>

0 0

12345678_0001

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

0 0