Question

当我注意到以下行为时，我正在编写一个“可插入”函数（在使用Firebug 1.5.3的FF 3.5.9中测试过）。

$.fn.computerMove = function () {
    var board = $(this);
    var emptySquares = board.find('div.clickable');
    var randPosition = Math.floor(Math.random() * emptySquares.length);


    emptySquares.each(function (index) {
        if (index === randPosition) {
            // logs a jQuery object
            console.log($(this));
        }
    });

    target = emptySquares[randPosition];
    // logs a non-jQuery object
    console.log(target);
    // throws error: attr() not a function for target
    board.placeMark({'position' : target.attr('id')});
}

当脚本在target.attr('id')（attr而不是函数）处抛出错误时，我注意到了这个问题。当我检查日志时，我注意到目标的输出（在Firebug中）是：

<div style="width: 97px; height: 97px;" class="square clickable" id="8"></div>

如果我从$(target)函数输出$(this)或each()，我会得到一个不错的jQuery对象：

[ div#8.square ]

现在我的问题出现了：为什么会发生这种情况，考虑到find()似乎返回了一个jQuery对象数组？为什么我必须重新$()到target？

[div#0.square, div#1.square, div#2.square, div#3.square, div#4.square, div#5.square, div#6.square, div#7.square, div#8.square]

只是好奇心:)。

Answer 1

.find()不返回一组 jQuery对象，但一个jQuery对象包含一个DOM元素数组（jQuery对象，在它的核心，是围绕DOM元素数组的包装器。）

当你迭代时，你所在的每个元素都是一个DOM元素。因此，它需要包含在$(this)中以成为jQuery对象并且可以访问这些方法。

另外作为旁注：id属性不能以数字开头，因为它是无效的HTML，您可能会或可能不会遇到奇怪的行为，尤其是跨浏览器（此规则适用于任何无效的HTML）

Answer 2

不，find方法不返回jQuery对象数组。您正在为此处的每个元素创建一个jQuery对象：

console.log($(this));

如果您在不创建jQuery对象的情况下记录该值：

console.log(this);

你会看到它是一个元素，而不是一个jQuery对象。

当您将jQuery对象作为数组访问时，您将获得一个元素。如果你想要一个jQuery对象，你必须从元素中创建一个。

通过jQuery中的数组索引与each（）函数检索元素

2 个答案: