js遍历点击的元素子节点

js loop through clicked elements childnodes and i have error : Uncaught TypeError: Cannot read property 'contains' of undefined

js循环点击元素子节点,我有错误:未捕获TypeError:无法读取属性'包含'未定义

I need to compare if one of them have class task-value and i cant understand why i have the error!!! Need Help sorry for bad English Link to js fiddle whith code

我需要比较一下,如果其中一个有类任务值,我不明白为什么我有错误!需要帮助抱歉抱错英文链接js小提琴代码

Link to code on js fiddle

链接到js小提琴上的代码

function docClick(e) {
    var target = e.target;
    console.log(this.childNodes.length)

    for(var i = 0; i < this.childNodes.length; i++){
        console.log(this.childNodes[i])

        if(this.childNodes[i].classList.contains("task-value")){
            console.log("if")
        }else{
            console.log("else")
        }
    }

Link UpDate whit full css/Html and Javascript

链接UpDate whit full css / Html和Javascript

1 个解决方案

#1

This become possible because this.childNodes contains not only HTML elements but text nodes too. Text nodes can't have classes so them never have property classList You need to use property children to get exactly html elements

这成为可能,因为this.childNodes不仅包含HTML元素,还包含文本节点。文本节点不能有类,所以它们永远不会有属性classList你需要使用属性children来获取完全html的元素

function docClick(e) {
    var target = e.target;
    console.log(this.children.length)

    for(var i = 0; i < this.children.length; i++){
        console.log(this.children[i])

        if(this.children[i].classList.contains("task-value")){
            console.log("if")
        }else{
            console.log("else")
        }
    }