主页 / 问题 / 1390656
Accepted
iKey
Asked:2022-08-16 15:55:19 +0000 UTC2022-08-16 15:55:19 +0000 UTC

如何将所有 h2 和 h3 包含在其中？

  • 772

有一个这样的页面布局：

<h2>1</h2>
.....
<h3>1.1</h3>
.....
<h3>1.2</h3>
.....
<h2>2</h2>
....
<h3>2.1</h3>

и тд.

我需要得到一个这样的数组：

1: 1.1, 1.2
2: 2.1
и т.д.

也就是说，你需要得到 h2 和所有 h3 直到新的 h2

我将不胜感激您的帮助！

jquery

1 个回答

  1. Best Answer

    带有输出对象的选项：

    function getContent() {
  const orderedElements = [...document.querySelectorAll('*')] // проверить влияние на быстродействие
    .filter((element) => ~['H2', 'H3'].indexOf(element.tagName));

  let key;
  return orderedElements.reduce((result, element) => {
    if (element.tagName === 'H2') {
      key = element.innerText;
      result[key] = [];
    } else {
      result[key].push(element.innerText);
    }
    return result;
  }, {});
}

console.log(getContent());
    <h2>1</h2>
<h3>1.1</h3>
<h3>1.2</h3>
<h2>2</h2>
<h3>2.1</h3>
<h3>2.2</h3>
<h2>3</h2>
<h3>3.1</h3>
<h3>3.2</h3>

    以及带有数组输出的选项：

    function getContent() {
  const orderedElements = [...document.querySelectorAll('*')] // проверить влияние на быстродействие
    .filter((element) => ~['H2', 'H3'].indexOf(element.tagName));

  let group;
  return orderedElements.reduce((result, element) => {
    if (element.tagName === 'H2') {
      group = [];
      result.push(group);
    } else {
      group.push(element.innerText);
    }
    return result;
  }, []);
}

console.log(getContent());
    <h2>1</h2>
<h3>1.1</h3>
<h3>1.2</h3>
<h2>2</h2>
<h3>2.1</h3>
<h3>2.2</h3>
<h2>3</h2>
<h3>3.1</h3>
<h3>3.2</h3>

    我的版本：

    function getContent() {
  const orderedElements = [...document.querySelectorAll('*')] // проверить влияние на быстродействие
    .filter((element) => ~['H2', 'H3'].indexOf(element.tagName));

  let key;
  let index = 0;
  return orderedElements.reduce((result, element) => {
    if (element.tagName === 'H2') {
      index++;
      key = element.innerText;
      result[index] = {
        key,
        child: []
      };
    } else {
      result[index].child.push(element.innerText);
    }
    return result;
  }, {});
}

console.log(getContent());
    <h2>A</h2>
<h3>1.1</h3>
<h3>1.2</h3>
<h2>B</h2>
<h3>2.1</h3>
<h3>2.2</h3>
<h2>C</h2>
<h3>3.1</h3>
<h3>3.2</h3>

    • 2

相关问题