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

添加此解决方案

class(df2$names)

https://jsfiddle.net/t5dw0qh7/1/

li.innerHTML += "<a href=#"+title.replace(' ','-').toLowerCase()+">"+title+"</a>";

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 += "<a href=#"+title.replace(' ','-').toLowerCase()+">"+title+"</a>";
        });

    });
});

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);
    });

  });
});

Answer 3

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

<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>

希望它能起作用。请检查一下。

从列表项文本生成href

3 个答案: