jquery：选择具有classname和node index的元素

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]你将获得索引v处的实际DOM对象

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

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

：eq doc