html 遍历span数组似乎会删除所有元数据

xqnpmsa8  于 2022-12-09  发布在  其他
关注(0)|答案(1)|浏览(133)

我已经创建了一个span数组,当我控制台记录它时,我可以看到它包含了我想要的所有元数据(也许这里的元数据是错误的)。

然而,当我循环代码和console.log每个项目时,所有元数据都消失了,它只显示内部文本。

这是一个问题,因为我试图访问父元素,但它返回null。
我试过使用console.dir而不是console.log,但结果完全是空白。
下面是我的JavaScript,感谢您的任何输入!

// Select all <span> elements
    const spanElements = document.querySelectorAll('span');

// Convert the NodeList to an array
const spanArray = Array.from(spanElements);

   // Select all <span> elements containing the estimated job length
    const lengthElements = spanArray.filter(element => element.innerText.includes('Estimated job length:'));
    console.log('lengthElements ', lengthElements)
    // Create an array to store the estimated job lengths
    const lengths = [];

    // Loop through the selected elements and extract the estimated job lengths
    for (let i = 0; i < lengthElements.length; i++) {
        console.log(`lengthElements[${i}] `, lengthElements[i])
        // Get the text inside the <span> element
        const text = lengthElements[i].innerText;
        console.log(`text ${text}`)

        // Extract the hours and minutes from the text
        const [hours, minutes] = [text.split(' ')[3], text.split(' ')[5]]

        // Get the checkbox element with the corresponding id
        const checkbox = document.getElementById(lengthElements[i].parentElement);
        console.log('length checkbox', checkbox)

        // Check if the checkbox is checked
        if (checkbox.checked) {
        // Add the hours and minutes to the array if the checkbox is checked
            lengths.push({ hours: Number(hours), minutes: Number(minutes) });
        };
    }
htzpubme

htzpubme1#

这是一个X/Y问题。
共享HTML,我可以轻松修复它。
以下语句无效,因为您没有传递ID
document.getElementById(lengthElements[i].parentElement);
但是修复这个问题不会有帮助,因为您不能让checkbox父元素指向span或任何其他元素,因为inputvoid element,并且在HTML中没有结束标记
你需要找到换行或者把输入和span放在一个标签或者其他容器中,然后我会在最近的公共静态容器中循环所有选中的复选框,看看inputElement.nextElementSibling或者inputElement.closest("label").querySelector("span")是否有文本。

相关问题