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

Question

It's very easy to use Each loop in jQuery. But I want to use For loop in JS, without using jQuery.

I can use Each loop like this. And $(this) selector is very helpful to reach child elements.

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

I want to reach child elements by using For loop, but this code doesn't even works...

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
}

I want to use For loop by using $(this) selector, but it's not working with For loop:

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

How to use For loop very easy as I show you or do you have any suggest?

Answer 1

Your code doesn't work because accessing an array-index property on an jQuery collection gives you the native DOM element in return, not a jQuery collection containing the element.

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

should be

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

But that's still using jQuery. If you want to avoid jQuery completely, you need to remove all references to $ . Try:

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

Or avoid manual iteration and invoke the iterator instead:

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

querySelector is the vanilla DOM method equivalent of jQuery's .find .