函数创建多维对象。

Question

你好，我正在努力写从多深度ul列表到一个对象的所有东西。我有这样的东西。

• 深度1
  • 深度2
    • 深度3
    • 深度3

​

- Depth Two 1

​

• 深度1 2
  • 深度2 2
    • 深度3

​

- Depth Two 2
    - Depth Three 2
    - Depth Three 2
    - Depth Three 2

​

​

3

• 深度1 3
  • 深度2 3
    • 深度3 3
    • 深度3

    <代码>H 137深度3<代码>H 238<代码>H 139深度3<代码>H 240<代码>H 141深度3<代码>H 242<代码>H 143深度3<代码>H 244<代码>H 145深度3

​

- Depth Two 3

​

我想用它的值来创建一个对象。我想让它像

const object = {
0:{
  item : Depth One 1,
  length: length of Depth Two,
  values:{
           0:{
           item: Depth One 1 => Depth Two 1(1st item)
           length: length: length of Depth Three,
           values:{
                   0:{
                      item: Depth One 1 => Depth Two 1 => Depth Three 1(1st item)
                      }
                   1:{
                      item: Depth One 1 => Depth Two 1 => Depth Three 1(2nd item)
                      }
          }
  }
  }
}
}

我试着用3 for循环来实现它，但是我没有得到我想要的结果。谢谢你的回答！

我的代码：

export function object(li, li2, li3, heightOfLi, widthOfLi) {
  let obj = {};

  for (let i = 0; i < li.length; i++) {
    let obj2 = {};
    if (li2[i] == undefined) {
      continue;
    }
    let counter = li2[i].querySelectorAll(".li-depth-2");
    if (counter == null) {
      continue;
    }

    for (let j = 0; j < counter.length; j++) {
      let obj3 = {};
      let counter2 = li3[j].querySelectorAll(".li-depth-3");

      if (counter2 == null) {
        continue;
      }

      for (let k = 0; k < counter2.length; k++) {
        obj3[k] = {
          name: li3[j].querySelectorAll(".li-depth-3 span")[k].textContent,
          item: li3[j].querySelectorAll(".li-depth-3")[k],
        };

        obj2[j] = {
          name: li2[i].querySelectorAll(".li-depth-2 span")[j].textContent,
          item: li2[i].querySelectorAll(".li-depth-2")[j],
          values: obj3,
        };
      }
    }

    obj[i] = {
      name: li[i].querySelector("span").innerText,
      item: li[i],
      length: counter.length,
      values: obj2,
    };
  }
  return obj;
}

Answer 1

我不确定您的标记，但我假设一个基于您的示例的标记如下所示。

在找到解决方案之前，几个要点：

• 为了解决这个问题，我宁愿使用reduce而不是for循环。更多的是，convenient.
• The算法使用querySelector和querySelectorAll获取所需的元素，并通过将元素数组缩减为对象(
• )来生成所需的对象，编写一个泛型函数生成一个级别的对象，并递归地调用它。
• ，在JavaScript中更方便地生成arrays的arrays，而不是objects的object。这就是我所做的。但是通过使用operator.
• Finally可以很容易地将数组转换成一个对象，所需的object还不够清楚，但是我认为您可以在代码片段.

中使用下面的结果数组来获得一般的思想。

​

function getChildren(container, ...levels) {
  const parent = container.querySelector(levels[0])
  const elements = container.querySelectorAll(levels[0])

  return [...elements].reduce((acc, cur) => {
    const children = cur.querySelectorAll(levels[1])
    return [...acc, {
      item: cur.querySelector("span").innerText,
      length: [...children].length,
      values: getChildren(parent, levels[1], levels[2], null)
    }]
  }, [])
}

console.log(getChildren(document, ".depth-one", ".depth-two", ".depth-three"))

<ul>
  <li class="depth-one">
    <span>Depth One 1</span>
    <ul>
      <li class="depth-two"><span>Depth Two 1<span>
        <ul>
          <li class="depth-three"><span>Depth Three 1<span></li>
          <li class="depth-three"><span>Depth Three 1</span></li>
    </ul>
  </li>
  <li class="depth-two"><span>Depth Two 1</span></li>
</ul>
</li>
<li class="depth-one"><span>Depth One 2</span>
  <ul>
    <li class="depth-two"><span>Depth Two 2</span>
      <ul>
        <li class="depth-three"><span>Depth Three 2</span></li>
      </ul>
    </li>
    <li class="depth-two"><span>Depth Two 2</span>
      <ul>
        <li class="depth-three"><span>Depth Three 2</span></li>
        <li class="depth-three"><span>Depth Three 2</span></li>
        <li class="depth-three"><span>Depth Three 2</span></li>
      </ul>
    </li>
  </ul>
</li>
<li class="depth-one"><span>Depth One 3</span>
  <ul>
    <li class="depth-two"><span>Depth Two 3</span>
      <ul>
        <li class="depth-three"><span>Depth Three 3</span></li>
        <li class="depth-three"><span>Depth Three 3</span></li>
        <li class="depth-three"><span>Depth Three 3</span></li>
        <li class="depth-three"><span>Depth Three 3</span></li>
        <li class="depth-three"><span>Depth Three 3</span></li>
        <li class="depth-three"><span>Depth Three 3</span></li>
        <li class="depth-three"><span>Depth Three 3</span></li>
      </ul>
    </li>
    <li class="depth-two"><span>Depth Two 3</span></li>
  </ul>
</li>
</ul>

​