Question

我正在尝试遍历HTML以获取内容并将其放入JSON文件

我有这个HTML：

<div class="main">

  <div class="results">
    <div class="name">joan</div>
    <div class="age">32</div>
  </div>

  <div class="results">
    <div class="name">Sam</div>
    <div class="age">35</div>
  </div>

  <div class="results">
    <div class="name">joo</div>
    <div class="age">32</div>
  </div>

</div>

我希望结果看起来像这样：

{
  "1": {
    "name": "joan",
    "age": "32",
  },
  "2": {
    "name": "Sam",
    "age": "35",
  },
  "3": {
      "name": "joo",
      "age": "32",
  },}

我试图使其与这种JavaScript结构一起使用，但没有用：

Array.from(document.getElementsByClassName("results")).forEach(
  function(element, index, array) {
    var  data = $('.name, .age').text();
    console.log(data);
  });

有什么主意吗？

Answer 1

以下是使用以下三种方法来获得所需结果的解决方案：

jQuery
ECMAScript 6
普通JavaScript

并且将数据结构更改为数组的建议，这将使以后使用它变得更加容易。

jQuery解决方案

您可以用所需的内容填充新对象res

使用jQuery方法.each遍历.results元素：

.each( function )

function：功能（整数index，元素element）

为每个匹配的元素执行的功能。

然后获取.results的孩子.name和.age的文本内容。

let res = {};

$(".results").each(function(index, element) {

  const [name, age] = [$(this).children('.name').text(), $(this).children('.age').text()];
  
  res[index] = {name, age}

});

console.log(res)

.as-console-wrapper { max-height: 100% !important; top: 0; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">

  <div class="results">
    <div class="name">joan</div>
    <div class="age">32</div>
  </div>

  <div class="results">
    <div class="name">Sam</div>
    <div class="age">35</div>
  </div>

  <div class="results">
    <div class="name">joo</div>
    <div class="age">32</div>
  </div>

</div>

ES6解决方案

获取.results元素的数组：

[...document.querySelectorAll('.results')]

使用.reduce方法将其简化为一个对象

reduce()方法将一个函数应用于累加器（此处为res）和数组中每个元素（此处为element）（此处为[...document.querySelectorAll('.results')]）（从左到右）右）将其减小为单个值（此处是一个对象）。
1. 使用.result
2. 将其与.map映射，以将此元素数组转换为其内容的数组（具有textContent属性）：
```
[...parent.children].map(e => e.textContent);
```
3. 您可以使用destructuring assignment将这两个数组元素都分配给变量name和age：
```
cons [name, age] = [...parent.children].map(e => e.textContent);
```
4. 向res对象添加新属性，并为以下元素返回res：
```
res[index] = {name, age};

return res;
```

这是完整的代码：

const res = [...document.querySelectorAll('.results')].reduce((res, parent, index) => {
  
  const [name, age] = [...parent.children].map(e => e.textContent);
  
  res[index] = {name, age};
  
  return res;
  
}, {});

console.log(res)

.as-console-wrapper { max-height: 100% !important; top: 0; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">

  <div class="results">
    <div class="name">joan</div>
    <div class="age">32</div>
  </div>

  <div class="results">
    <div class="name">Sam</div>
    <div class="age">35</div>
  </div>

  <div class="results">
    <div class="name">joo</div>
    <div class="age">32</div>
  </div>

</div>

普通JavaScript

使用[].slice.call展平NodeList，而不是spread syntax（...）
使用function expression代替arrow function。

代码如下：

const res = [].slice.call(document.querySelectorAll('.results')).reduce(function(res, parent, index) {
  
  const name = parent.querySelector('.name').textContent;
  const age = parent.querySelector('.age').textContent;
  res[index] = { name, age };
  
  return res;
  
}, {});

console.log(res)

.as-console-wrapper { max-height: 100% !important; top: 0; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">

  <div class="results">
    <div class="name">joan</div>
    <div class="age">32</div>
  </div>

  <div class="results">
    <div class="name">Sam</div>
    <div class="age">35</div>
  </div>

  <div class="results">
    <div class="name">joo</div>
    <div class="age">32</div>
  </div>

</div>

更改数据结构

您最好使用数组来保存数据，因为您使用整数作为值的键。在这种情况下，代码会短一些，您仍然可以通过索引res[0]，res[1]等访问属性。

const res = [...document.querySelectorAll('.results')].reduce((res, parent) => {
  
  const [name, age] = [...parent.children].map(e => e.textContent);
  
  return res.concat([{name, age}])
  
}, []);

console.log(res)

.as-console-wrapper { max-height: 100% !important; top: 0; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">

  <div class="results">
    <div class="name">joan</div>
    <div class="age">32</div>
  </div>

  <div class="results">
    <div class="name">Sam</div>
    <div class="age">35</div>
  </div>

  <div class="results">
    <div class="name">joo</div>
    <div class="age">32</div>
  </div>

</div>

Answer 2

没有jQuery，只有普通的javascript，而且速度非常快，您可以做这样简单的事情。

使用val input = "Hello WorLD" val expected = "hELLO wORld" input.reverseCase() shouldBeEqualTo expected作为初始对象的密钥，然后使用index / name创建另一个密钥，并将其分配为其值。

请注意，由于较新的浏览器现在在age上支持forEach，因此我同意了，尽管为旧版本的浏览器添加了nodeList的第二个版本，这可能更快：）

堆栈片段

for...loop

var data = {};

document.querySelectorAll(".results").forEach(function(el, idx) {
  data[idx+1] = {
                  "name": el.children[0].textContent,
                  "age": el.children[1].textContent
                };
});

console.log(data);

堆栈代码段-使用<div class="main"> <div class="results"> <div class="name">joan</div> <div class="age">32</div> </div> <div class="results"> <div class="name">Sam</div> <div class="age">35</div> </div> <div class="results"> <div class="name">joo</div> <div class="age">32</div> </div> </div>

for...loop

var data = {}, idx = 0, items = document.querySelectorAll(".results");

for(;idx < items.length; idx++) {
  data[idx+1] = {
                  "name": items[idx].children[0].textContent,
                  "age": items[idx].children[1].textContent
                };
}

console.log(data);

Answer 3

这是我的解决方案，使用纯JavaScript尝试一下

var data=[]; //declare an obj  container
var objresults= document.getElementsByClassName("results"); //get class element for results
for(let i=0; i < objresults.length; i++) //loop the result elements
{
    data.push(
    {
    [i+1]:{"name":objresults[i].getElementsByClassName("name")[0].innerHTML, 
    "age":objresults[i].getElementsByClassName("age")[0].innerHTML
    }});
   //push the values of its child elements
};

alert(JSON.stringify(data));
console.log(data);

<div class="main">

  <div class="results">
    <div class="name">joan</div>
    <div class="age">32</div>
  </div>

  <div class="results">
    <div class="name">Sam</div>
    <div class="age">35</div>
  </div>

  <div class="results">
    <div class="name">joo</div>
    <div class="age">32</div>
  </div>

</div>

Answer 4

var array = [];
$('.results').each(function(index, value) {
    array.push({
        "name": value.children[0].innerText,
        "age": value.children[1].innerText
    });
});
// the required result
var finalObject = JSON.stringify(array);

循环浏览javascript中的多维元素

4 个答案:

jQuery解决方案

ES6解决方案

普通JavaScript

更改数据结构