jquery:选择具有类名和节点索引的元素

jquery: select element with classname and node index

本文关键字：节点 索引 元素 选择 jquery      更新时间：2023-09-26

我有一堆类为".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]

这是真正的问题吗？我觉得嵌套选择器太奇怪了。

这是真正的问题吗？

是的。如果您通过括号表示法访问选定的元素，则会返回原始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);

你做的一切都很好，是的，你必须像这样重新包装元素。

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

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

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

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

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

：eq doc

相关文章：