从列表项文本生成 href答案

【问题标题】：Generating href from list item text从列表项文本生成 href
【发布时间】：2019-08-30 11:44:41
【问题描述】：

更新：

我有一个侧边栏，可以提取所有现有的 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

【问题讨论】：

为什么要链接到自身...？
虽然这很容易做到（一旦你知道如何，显然）这样做没有意义，因为 - 正如杰克上面评论的 - 这将创建一个有效链接到自身的元素，这在我看来毫无用处。
@JackBashford 因为我希望页面向下移动到页面的该部分。
正如@IlanSchemoul 所说，您很可能希望在 h3 元素中使用 id，以便单击链接将滚动到标题。
@Bakaka 你没有在你的问题中为你的标题设置 ID

标签： javascript jquery html css

【解决方案1】：

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

  });
});

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

添加这个你的解决方案

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

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

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

    });
});

<script src="https://code.jquery.com/jquery-1.11.2.min.js" type="text/javascript"></script>


<div id="content">
    <h3>Example One</h3>
    <h3>Example Two</h3>
    <h3>Example Three</h3>
</div>

<div id="sidemenu-container">
    <div class="wpb_wrapper">
        <div class="wpb_wrapper">
        </div>
    </div>
</div>

【讨论】：