-1

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

我可以像这样使用每个循环。并且$(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 循环，或者您有什么建议吗？

4

1 回答 1

4

您的代码不起作用，因为访问 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 的 vanilla DOM 方法.find。

于 2021-07-12T00:05:20.787 回答