javascript - 如何将数据提取到 JavaScript 中的对象中？

Question

我有一个具有以下结构的 HTML 代码:

<div class="betting-table">
    <div class="header">
        <div class="header-col">
            <div class="header-title">SOME TITLE</div>
        </div>
    </div>

    <div class="item">
        <div class="name">
            <div class="name top">SOME NAME</div>
           <div class="name bottom">SOME NAME</div>
        </div>
    </div>

    <div class="item">
        <div class="name">
            <div class="name top">SOME NAME</div>
           <div class="name bottom">SOME NAME</div>
        </div>
    </div>
</div>

<div class="betting-table">
    <div class="header">
        <div class="header-col">
            <div class="header-title">SOME TITLE</div>
        </div>
    </div>

    <div class="item">
        <div class="name">
            <div class="name top">SOME NAME</div>
           <div class="name bottom">SOME NAME</div>
        </div>
    </div>

    <div class="item">
        <div class="name">
            <div class="name top">SOME NAME</div>
           <div class="name bottom">SOME NAME</div>
        </div>
    </div>
</div>

我需要得到的是一个这样格式的对象:

{
  title : header-title,
  name : name-top
}

我目前能够使用以下方法获取名称:

function getMatches(){
    var divs = document.getElementsByClassName('name');
    var arr = Array.from(divs).map(m => {
      let name = m.querySelector('.name.top').innerText;
      return {name : name}
    });
    console.log(arr);
}

但是我不知道如何为每个项目映射标题，因此前两个项目将具有第一个标题，第三个和第四个项目将具有第二个标题。

在我描述的数据模型中获取数据的最佳方法是什么？

Answer 1

您可以遍历所有项目，然后使用 parentElement 访问 header

const array = [...document.getElementsByClassName('item')].map(i => {
  const title = i.parentElement.querySelector('.header-title').innerHTML;
  const name = i.querySelector('.name.top').innerHTML;
  return {title, name};
});

console.log(array);

<div class="betting-table">
    <div class="header">
        <div class="header-col">
            <div class="header-title">SOME TITLE 1</div>
        </div>
    </div>

    <div class="item">
        <div class="name">
            <div class="name top">SOME NAME 1</div>
           <div class="name bottom">SOME NAME 1</div>
        </div>
    </div>

    <div class="item">
        <div class="name">
            <div class="name top">SOME NAME 2</div>
           <div class="name bottom">SOME NAME 2</div>
        </div>
    </div>
</div>

<div class="betting-table">
    <div class="header">
        <div class="header-col">
            <div class="header-title">SOME TITLE 2</div>
        </div>
    </div>

    <div class="item">
        <div class="name">
            <div class="name top">SOME NAME 3</div>
           <div class="name bottom">SOME NAME 3</div>
        </div>
    </div>

    <div class="item">
        <div class="name">
            <div class="name top">SOME NAME 4</div>
           <div class="name bottom">SOME NAME 4</div>
        </div>
    </div>
</div>