从列表项文本生成 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">&nbsp; &nbsp; &nbsp; jQuery(function($) {&nbsp; &nbsp; &nbsp; &nbsp; $(document).ready(function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Create array from h3s found in main content&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let nodeList = document.getElementById('content').querySelectorAll('h3');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let list = [];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; nodeList.forEach(function(val){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; list.push(val.innerHTML)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Create unordered list&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var ul = document.createElement('ul');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Append unordered list to sidebar&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('sidemenu-container').getElementsByClassName("wpb_wrapper")[1].appendChild(ul).id = "top-menu";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log("list" , list);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Append list items to unordered list&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; list.forEach(function(title){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var li = document.createElement('li');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ul.appendChild(li);&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var a = document.createElement('a');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; li.appendChild(a);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; title = title.split(" ").join("-");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;var id1 = "#" + title;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(a).attr('id',&nbsp; id1);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; a.innerHTML += title;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; </script>希望它有效。请检查一下 。

Answer 2

jQuery(function($) {&nbsp;$(document).ready(function(){&nbsp; &nbsp; // Create array from h3s found in main content&nbsp; &nbsp; let nodeList = document.getElementById('content').querySelectorAll('h3');&nbsp; &nbsp; let list = [];&nbsp; &nbsp; nodeList.forEach(function(val){&nbsp; &nbsp; &nbsp; &nbsp; list.push(val.innerHTML)&nbsp; &nbsp; })&nbsp; &nbsp; // Create unordered list&nbsp; &nbsp; var ul = document.createElement('ul');&nbsp; &nbsp; // Append unordered list to sidebar&nbsp; &nbsp; document.getElementById('sidemenu-container').getElementsByClassName("wpb_wrapper")[1].appendChild(ul).id = "top-menu";&nbsp; &nbsp; // Append list items to unordered list&nbsp; &nbsp; list.forEach(function(title){&nbsp; &nbsp; &nbsp; &nbsp; var li = document.createElement('li');&nbsp; &nbsp; &nbsp; &nbsp; var a = document.createElement('a');&nbsp; &nbsp; &nbsp; &nbsp; var id =&nbsp; title.toLowerCase().split(" ").join('-');&nbsp; &nbsp; &nbsp; &nbsp; ul.appendChild(li);&nbsp; &nbsp; &nbsp; &nbsp; a.href = "#" + id;&nbsp; &nbsp; &nbsp; &nbsp; li.id = id&nbsp; &nbsp; &nbsp; &nbsp; a.innerHTML += title;&nbsp; &nbsp; &nbsp; &nbsp; li.appendChild(a);&nbsp; &nbsp; });&nbsp; });});