如何在 Javascript 中使用 For 循环，就像 jQuery 中的 Each 循环

Question

在 jQuery 中使用 Each 循环非常容易。 但我想在 JS 中使用 For 循环，而不使用 jQuery。

我可以像这样使用 Each 循环。 而$(this)选择器对于访问子元素非常有帮助。

$('.documents .document.selected').each(function(index){
    console.log($(this).find('.document-name p').text())//this code gives me all selected element's name
})

我想通过使用 For 循环来访问子元素，但此代码甚至不起作用...

for (let i = 0; i < $('.documents .document.selected').length; i++) {
    console.log($('.documents .document.selected')[i].find('.document-name p').text())//but this is not
}

我想通过使用$(this)选择器来使用 For 循环，但它不适用于 For 循环：

for (let i = 0; i < $('.documents .document.selected').length; i++) {
    console.log($(this).find('.document-name p').text())
}

正如我向您展示的那样，如何非常容易地使用 For 循环，或者您有什么建议吗？

Answer 1

您的代码不起作用，因为访问 jQuery 集合上的 array-index 属性会返回本机 DOM 元素，而不是包含该元素的 jQuery 集合。

$('.documents .document.selected')[i].find

应该

$('.documents .document.selected').eq(i).find

但这仍然使用jQuery。 如果您想完全避免使用 jQuery，则需要删除对$所有引用。 尝试：

const selectedDocs = document.querySelectorAll('.documents .document.selected');
for (let i = 0; i < selectedDocs.length; i++) {
    console.log(selectedDocs[i].querySelector('.document-name p').textContent);
}

或者避免手动迭代并改为调用迭代器：

for (const selectedDoc of document.querySelectorAll('.documents .document.selected')) {
    console.log(selectedDoc.querySelector('.document-name p').textContent);
}

querySelector是相当于 jQuery 的.find的 vanilla DOM 方法。