个人中心
gpt4 book ai didi

javascript - 在每个列表元素中插入链接标签

转载 作者：行者123 更新时间：2023-12-02 14:09:41 24 4
gpt4 key购买 nike

我想在每个 ul 元素中的两个列表项之间插入一个链接。目前我的代码仅在最后一个 ul 元素中插入链接。

<html>
<div class="list">
   <ul>
      <li>what</li>
      <li>now</li>
   </ul>
</div>
<div class="list">
   <ul>
      <li>what</li>
      <li>now</li>
   </ul>
</div>

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
  var tag = document.createElement("A")
  var linkedTag = tag.setAttribute('href', '/');
  tag.innerHTML = "UP"

  $('.list').each(function(i, obj) {
    var one = obj.childNodes[1];
    one.insertBefore(tag, one.childNodes[2])
  });
</script>
</html>

最佳答案

使用 jQuery 有一种更简单的方法来做到这一点

$('.list').append(function() {
    return $('<a>', { href : '/', text : 'UP' })
});

您的代码不起作用的原因是因为您只创建了一个 anchor 并移动它，因此它最终会到达最后移动到的位置。

另请注意，您正在做的直接在 UL 中插入 anchor 是无效标记。如果您想在每个 UL 之前放置一个 anchor ，您可以这样做

$('.list ul').prepend(function() {
    return $('<a>', { href : '/', text : 'UP' })
});

如果您希望 anchor 位于两个现有的 LI 元素之间，则还必须将该 anchor 包装在 LI 元素中

$('.list ul li:first-child').after(function() {
    return $('<li>', {
        html : $('<a>', { href : '/', text : 'UP' })
    });
});

FIDDLE

关于javascript - 在每个列表元素中插入链接标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39733383/

24 4 0
文章推荐： javascript - jq:如果可能的话如何转换为数字，如果没有则保持原样？
文章推荐： javascript - 根据 URL 中的值捕获数据
文章推荐： javascript - 为什么在这种情况下我需要 componentWillReceiveProps？
文章推荐： javascript - 替换多个链接