使用 foreach 理解 jQuery 选择器

Question

我无法理解为什么我的选择器不适用于 foreach 循环。

我的 DOM 看起来是这样的：

<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>

有人可以解释为什么以下选择器对 foreach 迭代无效吗？

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

或

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

甚至：

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

Answer 1

您需要使用 each() 来迭代 jQuery 对象，它是为它构建的。

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() 使用迭代数组而不是 jQuery 对象集合。

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

为了更好的理解Iterating over jQuery and non-jQuery Objects

使用 foreach 理解 jQuery 选择器

Understanding jQuery Selector using foreach

foreach

jquery

jquery-selectors