第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題，去搜搜看，總會(huì)有你想問(wèn)的

如何從 DOM 以相同順序創(chuàng)建標(biāo)題標(biāo)簽的嵌套列表元素

如何從 DOM 以相同順序創(chuàng)建標(biāo)題標(biāo)簽的嵌套列表元素

所以我有一個(gè) HTML 文檔，其中包含任意數(shù)量的 h1、h2、h3、h4 等標(biāo)簽，帶有嵌套。例子。<h2>About cats</h2><p>Some Info about cats</p><h2>About dogs</h2><p>Some Info about cats</p><h3>Breed 1</h3><p>About breed 1</p><h3>Breed 2</h3><p>About breed 2</p><h2>About birds</h2><p>Info about birds</p>現(xiàn)在，我想要的是，進(jìn)行一些 DOM 遍歷，獲取所有標(biāo)題標(biāo)簽，id通過(guò)將它們的內(nèi)容設(shè)為蛇形大小寫(xiě)來(lái)為它們添加屬性<h2 id="about-dogs" >About Dogs</h2>然后，創(chuàng)建一個(gè)包含以下內(nèi)容的列表元素。嵌套將根據(jù)標(biāo)題標(biāo)簽的位置和位置進(jìn)行。意味著每個(gè)標(biāo)題將嵌套在第一個(gè)更高級(jí)別的標(biāo)題中，依此類推。因此，如果只有一個(gè)h1，那么它將形成一棵樹(shù)，h1其根為根，最低級(jí)別的標(biāo)題為葉。<ul>   <li><a href="#about-cats" >About cats</a></li>   <li><a href="#about-dogs">About dogs</a></li>      <ul>        <li><a href='#breed-1' >Breed 1</a></li>        <li><a href='#breed-2' >Breed 1</a></li>      </ul>    <li><a href='#about-birds' >About birds</a></li></ul>
查看完整描述

2 回答

?
一只名叫tom的貓

TA貢獻(xiàn)1906條經(jīng)驗(yàn) 獲得超3個(gè)贊

演示

function getHeaders() {

  const hTags = ["h1", "h2", "h3", "h4", "h5", "h6"];

  const elements = document.querySelectorAll(hTags.join());

  const headers = [];


  elements.forEach(el => {

    const text = el.innerText;

    const id = text

      .toLowerCase()

      .split(" ")

      .join("-");


    el.setAttribute("id", id);


    headers.push({

      id,

      text,

      level: hTags.indexOf(el.tagName.toLowerCase())

    });

  });


  return headers;

}


function buildTree(headers) {

  const list = [];

  let nextLevelHeaders = [];

  let lastLevel = -1;


  if (headers.length === 0) {

    return "";

  }


  const buildSubTree = () => {

    if (nextLevelHeaders.length > 0) {

      list[list.length - 1] += buildTree(nextLevelHeaders);

    }

  };


  headers.forEach(h => {

    if (lastLevel !== -1 && lastLevel < h.level) {

      nextLevelHeaders.push(h);

      return;

    }


    buildSubTree();


    lastLevel = h.level;

    list.push(`<a href="#${h.id}">${h.text}</a>`);

    nextLevelHeaders = [];

  });


  buildSubTree();


  const listHTML = list.map(i => `<li>${i}</li>`).join("");

  return `<ul>${listHTML}</ul>`;

}


const headers = getHeaders();


document.querySelector("#root").innerHTML = buildTree(headers);

<div id="root"></div>


<h3>About horses (h3)</h3> <!-- corner case -->

<p>Some Info about horses</p>


<h2>About cats (h2)</h2>

<p>Some Info about cats</p>


<h2>About dogs (h2)</h2>

<p>Some Info about cats</p>

<h3>Breed 1 (h3)</h3>

<p>About breed 1</p>

<h3>Breed 2 (h3)</h3>

<p>About breed 2</p>

<h4>Breed 2.1 (h4)</h4>

<p>About breed 2.1</p>

<h4>Breed 2.2 (h4)</h4>

<p>About breed 2.2</p>

<h3>Breed 3 (h3)</h3>

<p>About breed 3</p>

<h3>Breed 4 (h3)</h3>

<p>About breed 4</p>


<h2>About birds (h2)</h2>

<p>Info about birds</p>


<h4>Bird <b>one</b> (h4)</h4><!-- corner case -->

<p>Info about birds</p>


查看完整回答
反對(duì) 回復(fù) 2022-12-18
?
青春有我

TA貢獻(xiàn)1784條經(jīng)驗(yàn) 獲得超8個(gè)贊

好的，我認(rèn)為我們可以做得更好，但是現(xiàn)在，這段代碼可以滿足您的期望，前提是您的 html 中有一個(gè)帶有id="list"的元素可以將您的列表放入


在 Codepen 上查看實(shí)際效果


<nav id="list">

</nav>

let headers = document.querySelectorAll('h1, h2, h3')


let list = document.createElement('ul')

document.querySelector('#list')

  .appendChild(list)

  // list is now a ul in the nav section


let currentListLevel = 0

let currentListUl = list

let lastListItem = list

headers.forEach(h => {

  let text = h.innerText

  let level = h.tagName.slice(-1)

  console.log(level + ':' + text)

  let snakeCase = text.toLowerCase()

    .trim()

    .replace(' ', '-')

  

  h.id = snakeCase // now title has id

  

  let link = document.createElement('a')

  // create the link

  link.appendChild(document.createTextNode(text))

  // give it the text of the header

  link.href = '#' + snakeCase

  // give it the reference to the header

  let li = document.createElement('li')

  li.appendChild(link)

  

  if (level === currentListLevel) {

    currentListUl.appendChild(li)

    lastListItem = li

  } else if (level > currentListLevel) {

    currentListLevel = level

    let ul = document.createElement('ul')

    ul.level = level // store the level in a property

    ul.appendChild(li)

    lastListItem.appendChild(ul)

    currentListUl = ul

    lastListItem = li

  } else if (level < currentListLevel) {

    while (level < currentListLevel) {

      currentListUl = currentListUl.parentNode

      level = currentListUl.level

    }

    currentListUl.appendChild(li)

    lastListItem = li

    currentListLevel = level

  }

  

})


查看完整回答
反對(duì) 回復(fù) 2022-12-18
  • 2 回答
  • 0 關(guān)注
  • 111 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)