从列表项文本生成 href

Question

更新：我有一个侧边栏，它提取所有现有的 h3 标签并在列表中显示文本。我希望这些列表项与文本具有相同的 id 和 href。示例列表项：当前的： <li>Heading One</li>期望： <li id="heading-one"><a href="#heading-one">Heading One</li>HTML：<div id="content">    <h3 id="example-one">Example One</h3>    <h3 id="example-two">Example Two</h3>    <h3 id="example-three">Example Three</h3></div><div id="sidemenu-container">    <div class="wpb_wrapper">        <div class="wpb_wrapper">        </div>    </div></div>JavaScript：jQuery(function($) {    $(document).ready(function(){        // Create array from h3s found in main content        let nodeList = document.getElementById('content').querySelectorAll('h3');        let list = [];        nodeList.forEach(function(val){            list.push(val.innerHTML)        })        // Create unordered list        var ul = document.createElement('ul');        // Append unordered list to sidebar        document.getElementById('sidemenu-container').getElementsByClassName("wpb_wrapper")[1].appendChild(ul).id = "top-menu";        // Append list items to unordered list        list.forEach(function(title){            var li = document.createElement('li');            ul.appendChild(li);            li.innerHTML += title;        });    });});想要的结果：<div id="content">    <h3 id="example-one">Example One</h3>    <h3 id="example-two">Example Two</h3>    <h3 id="example-three">Example Three</h3></div><div id="sidemenu-container">    <div class="wpb_wrapper">        <ul>            <li><a href="#example-one">Example One</a></li>            <li><a href="#example-two">Example Two</a></li>            <li><a href="#example-three">Example Three</a></li>        </ul>    </div></div>JSFiddle：https://codepen.io/Crawlinson/pen/OJLjyGe

Answer 1

这是您问题的确切解决方案

<script type="text/javascript">

      jQuery(function($) {

        $(document).ready(function(){

            // Create array from h3s found in main content

            let nodeList = document.getElementById('content').querySelectorAll('h3');

            let list = [];

            nodeList.forEach(function(val){

              list.push(val.innerHTML)

            })

            // Create unordered list

            var ul = document.createElement('ul');

            // Append unordered list to sidebar

            document.getElementById('sidemenu-container').getElementsByClassName("wpb_wrapper")[1].appendChild(ul).id = "top-menu";

              console.log("list" , list);

            // Append list items to unordered list

            list.forEach(function(title){

              var li = document.createElement('li');

              ul.appendChild(li); 

              var a = document.createElement('a');

              li.appendChild(a);

          title = title.split(" ").join("-");

           var id1 = "#" + title;

              $(a).attr('id',  id1);

              a.innerHTML += title;

            });

          });

      });

    </script>

希望它有效。请检查一下 。

Answer 2

jQuery(function($) {

 $(document).ready(function(){

    // Create array from h3s found in main content

    let nodeList = document.getElementById('content').querySelectorAll('h3');

    let list = [];

    nodeList.forEach(function(val){

        list.push(val.innerHTML)

    })

    // Create unordered list

    var ul = document.createElement('ul');

    // Append unordered list to sidebar

    document.getElementById('sidemenu-container').getElementsByClassName("wpb_wrapper")[1].appendChild(ul).id = "top-menu";

    // Append list items to unordered list

    list.forEach(function(title){

        var li = document.createElement('li');

        var a = document.createElement('a');

        var id =  title.toLowerCase().split(" ").join('-');

        ul.appendChild(li);

        a.href = "#" + id;

        li.id = id

        a.innerHTML += title;

        li.appendChild(a);

    });

  });

});