Understanding jQuery Selector using foreach

Question

I am having trouble understanding why my selector is not working for a foreach loop.

My DOM looks as such:

<div id="page1" class="ui-droppable">

    <div class="ui-draggable ui-draggable-handle ui-draggable-dragging signatureInstance selected btn-delete" style="position: absolute; left: 185px; top: 470px;">
        <img src="http://example.com/img/field.png">
        <span class="glyphicon glyphicon-remove btn-delete"><span></span></span>
    </div>

    <div class="ui-draggable ui-draggable-handle ui-draggable-dragging signatureInstance selected btn-delete" style="position: absolute; left: 171px; top: 562px;">
        <img src="http://example.com/img/field.png">
        <span class="glyphicon glyphicon-remove btn-delete"><span></span></span>
    </div>

</div>

Would someone kindly explain why the following selector is not valid for a foreach iteration?

$('#page1 .signatureInstance').forEach(function(index) {
    console.log($(this));
});

or

$('#page1 .ui-draggable .ui-draggable-handle .ui-draggable-dragging signatureInstance .selected .btn-delete').forEach(function(index) {
    console.log($(this));
});

or even:

$('#page1 div').forEach(function(index) {
    console.log($(this));
});

Pranav C Balan · Accepted Answer · 2015-09-17 19:53:11Z

2

You need to use each() for iterate over jQuery object, it's built for it.

The .each() method is designed to make DOM looping constructs concise and less error-prone. When called it iterates over the DOM elements that are part of the jQuery object. Each time the callback runs, it is passed the current loop iteration, beginning from 0. More importantly, the callback is fired in the context of the current DOM element, so the keyword this refers to the element. ( Taken from https://api.jquery.com/each/ )

Array.prototype.forEach() using for iterate an array not for jQuery object colection.

$('#page1 .signatureInstance').each(function(index) {
    console.log($(this));
});

For a better understanding Iterating over jQuery and non-jQuery Objects

edited Sep 17, 2015 at 19:53

answered Sep 17, 2015 at 19:41

Pranav C Balan

115k25 gold badges173 silver badges195 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nathan_Sharktek Over a year ago

Well I feel silly. Thank you. I really appreciate the help!

Pranav C Balan Over a year ago

@Nathan_Sharktek : glad to help

Collectives™ on Stack Overflow

Understanding jQuery Selector using foreach

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related