jQuery的：在同一時間

Question

隨着jQuery.each()應用功能的元件，我可以迭代通過陣列的成員：

// This is NOT what I am looking for. 
$('.example a').each(function() { 
    // do a lot of things here 
    $(this).css('color', 'red'); 
}); 

然而，我需要一個函數應用於jQuery的數組本身，而不是其成員。所以我寫了一個小插件來做到這一點：

$.fn.all = function(callback) { return callback.call(this); } 

$('.example a').all(function() { 
    // do a lot of things here 
    $(this).css('color', 'red'); 
}); 

請注意，在上面的功能，this將被設置爲元素的集合 - 這正是我需要。
現在我確信jQuery應該有一個優雅的方式來做到這一點，但我還沒有找到任何文檔或谷歌搜索。

是否有可能，如果是的話，如何在不使用自定義插件的情況下實現這一目標？

更新：我不能直接做$('.example a').css('color', 'red');。我在函數中有數十個計算，所以我必須使用類似於我寫的插件的東西。 我要求回電。正確的答案必須提供類似於自定義函數的回調。

Answer 1

你並不需要一個插件，你可以直接使用call：

(function() { 
    // do a lot of things here 
    this.css('color', 'red'); 
}).call($('.example a')); 

或者考慮通過數組類對象作爲參數

(function(arrayLike) { 
    // do a lot of things here 
    arrayLike.css('color', 'red'); 
})($('.example a')); 

或者如果你喜歡一個jQuery的方式

$.each([$('.example a')], function(){ 
    // do a lot of things here 
    this.css('color', 'red'); 
}); 

Answer 2

不應該

$('.example a').css('color', 'red'); 

夠嗎？

Answer 3

這

$('.example a') 

收益匹配的元素集合。而這

$('.example a').css('color', 'red'); 

設置顏色紅色集合中的所有元素。

這就是jQuery的工作原理。

Answer 4

我認爲不可能在同一時間獲得所有計算，您應該使用線程或webWorker。你可以在mdn得到更多關於這方面的信息。

Answer 5

您可以緩存選擇器，利用$.queue()

var elems = $(".example a"); 
 
$.queue(elems, "q", function() { 
 
    $(this).css("color", "red"); 
 
    console.log(this) 
 
}); 
 
$.dequeue(elems, "q")

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
 
</script> 
 
<div class="example"> 
 
    <a href="#">a</a> 
 
    <a href="#">b</a> 
 
    <a href="#">c</a> 
 
</div>

Answer 6

這將是直線前進（jQuery的去年秋季）的方式做你想要什麼：

var $collection = $('.example a'); 
$collection.each(function() { 
    // do a lot of things here 
    $collection.css('color', 'red'); 
}); 

//而另一個原因，我不喜歡jQuery的實施each() 。
//但最重要的是，錯誤的參數順序和this通過當前值/節點的濫用

在這裏我最喜歡的實現。主要像Array.prototype.forEach()，以及$.each()的好的部分。

$.fn.forEach = function(fn, scope){ 
    if(scope != null) fn = fn.bind(scope); 
    for(var i = 0, len = this.length; i < len; ++i) 
     if(false === fn(this[i], i, this)) break; 
    return this; 
} 

，你的代碼將是這樣的：

$('.example a').forEach(function(node, index, $collection){ 
    //and don't use `$(this)`, since `this` most of the time references `window` 
    //unless you've bound the function to a scope, or passed one to forEach 

    var $node = $(node); 

    $collection.css('color', 'red'); 
});