Question

如何根据下面的列表创建链接，并通过Javascript将它们从列表更改为链接。

<li class="navigation><a href="#LOVE">LOVE</a></li>
...

应该成为：

jsonpickle.handlers.register(A, handlers.OrderedDictReduceHandler)

Answer 1

没有jQuery：

＆＃13;

function makeLinks(ul) {
  for (i of document.querySelectorAll(ul + " > li")) {
    var t = i.innerHTML;
    i.innerHTML = "<a href='" + t.toLowerCase() + "'>" + t + "</a>";
  }
}

makeLinks("#menu");

＆＃13;

<ul id="menu">
  <li class="navigation">LOVE</li>
  <li class="navigation">HATE</li>
  <li class="navigation">LIFE</li>
</ul>

＆＃13;

Answer 2

由于我没有看到任何jQuery标记，因此这是一个使用普通javascript的解决方案。

使用li循环遍历所有querySelectorAll()并将每个textContent替换为所需的节点：

＆＃13;

liAll = document.querySelectorAll('li');
liAll.forEach(function(elt) {
  txt = elt.textContent;
  link = document.createElement('a');
  atxt = document.createTextNode(txt);
  link.appendChild(atxt);
  link.setAttribute('href', '#' + txt);
  elt.appendChild(link);
  elt.firstChild.remove();
});

＆＃13;

<li class="navigation">LOVE</li>
<li class="navigation">HATE</li>
<li class="navigation">LIFE</li>

＆＃13;

Answer 3

$('li.navigation').each(function(index,element){
  var me = $(this);
  $(element).replace(function(){
     return "<a href='your reference here'>"+me.text+"</a>"
  })
})

通过js更改li类以成为链接

3 个答案: