当前位置: 首页 > 知识库问答 >
问题:

只将新列表项添加到列表

傅宏恺
2023-03-14

我对JavaScript相当陌生,所以要寻找最简单的解决方案(也不要寻找jQuery解决方案)。

我正在尝试将单击的列表项添加到新列表中,仅当单击的列表项不在新列表中时。 我已设法将单击的列表项添加到新列表中,但未能创建一个正常运行的if语句,该语句检查新列表中的当前项。

null

window.onload = function () {
    var ul = document.getElementById('bulk');

    ul.addEventListener('click', function (e) {
        var target = e.target;
        while (target && target.parentNode !== ul) {
            target = target.parentNode; 
            if(!target) { return; } 
        }
        if (target.tagName === 'LI'){
            var node = document.createElement("LI");
            var textnode = document.createTextNode(target.id);
            var textarea = document.getElementById("test1");
            if (!textarea.querySelector(target.id)) {
                node.appendChild(textnode);
                document.getElementById("test1").appendChild(node);
            }
        }
    });
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <script src="test.js"></script>
    </head>

    <body>
        <ul id="bulk">
            <li id="banana"><a href="#"><b>banana</b></a></li>
            <li id="apple"><a href="#"><b>apple</b></a></li>
        </ul>
        <ul id="test1"></ul><br>
    </body>
</html>

null

共有1个答案

糜博远
2023-03-14

由于在一个文档中不应该有多个具有相同ID的元素,所以我做了一些修改,使每个元素的唯一ID位于数据集属性data-id中。

除此之外,还需要使用QuerySelector()来确定这样的节点是否已经在目标列表中。

null

var ul = document.getElementById('bulk');
var destination = document.getElementById("test1");

ul.addEventListener('click', function(e) {
  var target = e.target;
  while (target && target.parentNode !== ul) {
    target = target.parentNode;
    if (!target) {
      return;
    }
  }
  if (target.tagName === 'LI') {
    var id = target.dataset.id;
    var node = document.createElement("LI");
    node.dataset.id = id;
    var textnode = document.createTextNode("element with id " + id);
    if (destination.querySelector("[data-id=" + id + "]")) {
      return;
    }
    node.appendChild(textnode);
    destination.appendChild(node);
  }
});
<ul id="bulk">
  <li data-id="banana"><a href="#"><b>banana</b></a></li>
  <li data-id="apple"><a href="#"><b>apple</b></a></li>
</ul>
<hr />
<ul id="test1">
</ul>
 类似资料:
  • 我的目标是从用户输入的“AM”-“PM”字符串格式打印包含24小时十进制格式的进入和退出时间的列表,如以下字符串数组:{6AM#8AM,11AM#1PM,7AM#8PM,7AM#8AM,10AM#12PM,12PM#4PM,1PM#4PM,8AM#9AM} 我在for循环中声明了各个列表,并在循环中为它们赋值,但从代码中得到了以下运行时异常:java。lang.IndexOutOfBoundsEx

  • 问题内容: 与此问题类似,如何将空列添加到数据框?,我想知道向DataFrame添加一列空列表的最佳方法。 我想要做的基本上是初始化一列,然后遍历行以处理其中的一些行,然后在此新列中添加填充列表以替换初始化的值。 例如,如果下面是我的初始DataFrame: 然后,我最终希望得到这样的结果,其中每一行都经过单独处理(显示了示例结果): 当然,如果我尝试像使用其他任何常量一样进行初始化,它会认为我正

  • 问题内容: 我使用SQLAlchemy制作了一个表,却忘记添加列。我基本上想这样做: 这是什么语法?我在文档中找不到它。 问题答案: 这称为数据库迁移(SQLAlchemy不支持即开即用的迁移)。您可以考虑使用sqlalchemy- migrate 在这种情况下提供帮助,也可以仅通过选择的数据库的命令行实用程序,

  • < code>list_of_lists=[[1,2,3],[4,5,6]] < br > < code > list _ to _ add =[" A "," B "," C"] 我希望结果是list_of_lists会变成: 谢谢!

  • 很容易将列表列表转换为数据帧: 但是我如何将df转换回列表列表呢?

  • 本文向大家介绍Visual Basic .NET将项目添加到列表,包括了Visual Basic .NET将项目添加到列表的使用技巧和注意事项,需要的朋友参考一下 示例 要一次添加多个项目,请使用AddRange。始终添加到列表的末尾 为了将项目添加到列表的中间,请使用插入 插入将把该项目放置在索引处,并对其余项目重新编号 新输出:            

  • 在有趣的功能中,当我将列表添加到其他列表时,它正在添加空列表,我可以找到原因有人可以帮助我这个程序是关于查找给定数组的不同组合

  • 我有一个输入字段,它使用的是。下面的确实返回了我的列表 该列表以代码隐藏方式生成,如下所示 我的观点 但是当我运行代码时,我得到了以下错误 \n\nSCRIPT1004:预期; 下面是它返回的一些结果:$(函数(){var list=list[2103]; 注意:所有粗体的措辞都是我的清单失败的地方。 我试着做