javascript - jquery：选择具有类名和节点索引的元素

Question

我有一堆“.myclass”类的元素。现在我想通过节点索引选择其中一个元素并为其设置动画。我收到一条错误消息，指出该元素没有动画功能。

例子：

<div class="myclass"></div>
<div class="myclass"></div>
<div class="myclass"></div>

var indizes = [0, 3];

$.each(indizes, function(i, v) {
    $('.myclass')[v].animate({
        left: 100
    }, 1000);
});

显然错误来自使用错误的选择器。如果我使用它确实有效

$($('.myclass')[v])

代替

$('.myclass')[v]

这是实际的问题吗？嵌套选择器对我来说似乎很奇怪。

Answer 1

这是实际的问题吗？

是的。如果您通过方括号表示法访问选定元素，您将返回原始 DOM 元素。DOM 元素没有animate方法。通过再次将 DOM 元素传递给 jQuery（$($('.myclass')[v])），您正在创建一个 jQuery 对象（再次）。

您可以避免这种情况并使用.eq该索引处的元素获取 jQuery 对象：

$('.myclass').eq(v);

最好在循环之外保留对选定元素的引用：

var indizes = [0, 3];
var $elements = $('.myclass');

$.each(indizes, function(i, v) {
    $elements.eq(v).animate({
        left: 100
    }, 1000);
});

或者，您可以使用.filter过滤掉要制作动画的元素，这至少看起来更简洁：

$('.myclass').filter(function(i) {
    return $.inArray(i, indizes) > -1;
}).animate({
    left: 100
}, 1000);

Answer 2

您所做的一切都是正确的，是的，您确实必须像这样重新包装元素。

var indizes = [0, 3],
    elements = $('.myclass');

$.each(indizes, function(i, v) {
    $(elements[v]).animate({
        left: 100
    }, 1000);
});

当您这样做时$('.myclass')[0]，该元素不再附加任何 jQuery 方法

Answer 3

当您使用时，您$('.myclass')[v]将在索引处获取实际的 DOM 对象v

您可以在下面使用而不是尝试使用数组表示法

$('.myclass:eq('+v+')');

:eq 文档