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