jQuery id选择器正在选择所有元素

我试图选择一个具有特定id（todoItems）的ul，但页面上的所有ul都受到此代码的影响。特别是ul在我的导航栏里。我也试过按班级选择，但运气不好。因为我是ul的附属者，所以我想不出一个具体的方法来选择李的。感谢您的帮助。请参阅下面的代码：

编辑*这也是用于此的css。我正在一个express应用程序中运行所有这些代码。我正在这个应用程序的一个页面上运行这个待办事项列表，它有自己的导航栏等。CSS/JS等使用ejs布局链接

var todoItems=document.getElementById（“todoItems”）；
$（todoItems）.on（“单击“，”.todoItem”，函数（）{
$（此）.toggleClass（“已完成”）；
});
$（todoItems）。在（“单击”、“span.remove”上，函数（事件）{
$（this.parent（）.fadeOut（300，function（））{
$（this.remove（）；
});
event.stopPropagation（）；
});
$（“输入[type='text']”）。在（“按键”上，函数（事件）{
if（event.which==13）{
var todoText=$（this.val（）；
$（todoItems）。追加（“
”+todoText+”
”；
}
});
美元（“.fa plus”）。在（“单击”，（）=>{
$（“输入[type='text']”）。fadeToggle（）；
});
正文{
背景色：#43515f；
}
.siteBody{
字体系列：“Roboto”，无衬线；
背景：#2980B9；/*旧浏览器的回退*/
背景：-webkit线性渐变（向左，#FFFFFF，#6DD5FA，#2980B9）；/*Chrome 10-25，Safari 5.1-6*/
背景：线性渐变（向左，#FFFFFF，#6DD5FA，#2980B9）；/*W3C、IE 10+/Edge、Firefox 16+、Chrome 26+、Opera 12+、Safari 7+*/
填充顶部：10px；
垫底：10px；
}
.siteBody h1{
背景色：#2980b9；
颜色：白色；
保证金：0；
填充：10px 20px；
文本转换：大写；
字体大小：24px；
字体大小：正常；
}
输入{
字号：18px；
背景色：#f7f7f7；
宽度：100%；
填充：13px 13px 13px 20px；
颜色：#2980b9；
边框：3倍实心rgba（0,0,0,0）；
}
输入：焦点{
背景色：白色；
边框：3px实心#2980b9；
大纲：无；
}
.siteBody ul{
列表样式：无；
保证金：0；
填充：0；
}
李锡博博士{
背景色：白色；
高度：40px；
线高：40px；
颜色：#666；
}
.siteBody li:n个孩子（2n）{
背景色：#f7f7f7；
}
.siteBody li:悬停跨度{
宽度：40px；
不透明度：1.0；
}
.场地主体跨度{
背景色：#e74c3c；
高度：40px；
右边距：20px；
文本对齐：居中；
颜色：白色；
宽度：0；
显示：内联块；
过渡：0.2s线性；
不透明度：0；
}
法加{
浮动：对；
}
.完成{
颜色：灰色；
文字装饰：线条贯通；
}
#容器{
背景色：#f7f7f7；
盒影：0 3pxRGBA（0,0,0,0.1）；
宽度：360px；
保证金：100像素自动；
}















待办事项清单

杂货店
获取编码作业
完成两个训练营
走鱼
做饭
预订航班

我已经更新了设置事件侦听器的方式，并删除了选择元素的纯js方式，因为您已经使用了jQuery


$（“#todoItems>.todoItem”）。在（“单击”，函数（）{
$（此）.toggleClass（“已完成”）；
});
$（“#todoItems>span.remove”）。在（“单击”上，函数（事件）{
$（this.parent（）.fadeOut（300，function（））{
$（this.remove（）；
});
event.stopPropagation（）；
});
$（“输入[type='text']”）。在（“按键”上，函数（事件）{
if（event.which==13）{
var todoText=$（this.val（）；
$（“#todoItems”）.append（“
”+todoText+”
”）；
}
});
美元（“.fa plus”）。在（“单击”，（）=>{
$（“输入[type='text']”）。fadeToggle（）；
});















待办事项清单

杂货店
获取编码作业
完成两个训练营
走鱼
做饭
预订航班

请尝试以下代码：

var todoItems = document.getElementById("todoItems");

    $(document).on("click", "#todoItems .todoItem", function() {
        $(this).toggleClass("completed");
    });

    $(document).on("click", "#todoItems span.remove", function(event) {
        $(this).parent().fadeOut(300, function() {
            $(this).remove();
        });
        event.stopPropagation();
    });

    $("input[type='text']").on("keypress", function(event) {
        if (event.which === 13) {
            var todoText = $(this).val();
            $(todoItems).append("<li class='todoItem'><span class = 'remove'><i class='fa fa-trash'></i> </span>" + todoText + "</li>");
        }
    });

    $(".fa-plus").on("click", () => {
        $("input[type='text']").fadeToggle();
    });

var todoItems=document.getElementById（“todoItems”）；
$（文档）。在（“单击”上，“#todoItems.todoItem”，函数（）{
$（此）.toggleClass（“已完成”）；
});
$（文档）。在（“单击”上，“todoItems span.remove”，函数（事件）{
$（this.parent（）.fadeOut（300，function（））{
$（this.remove（）；
});
event.stopPropagation（）；
});
$（“输入[type='text']”）。在（“按键”上，函数（事件）{
if（event.which==13）{
var todoText=$（this.val（）；
$（todoItems）。追加（“
”+todoText+”
”；
}
});
美元（“.fa plus”）。在（“单击”，（）=>{
$（“输入[type='text']”）。fadeToggle（）；
});
只需使用
$（'todoItems'）