jQuery:同时将函数应用于元素

时间:2016-05-06 20:45:12

标签: javascript jquery

使用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');。我在函数中有几十个计算,所以我必须使用与我编写的插件类似的东西。 我要求回电。正确的答案必须提供类似于自定义函数的回调。

6 个答案:

答案 0 :(得分:2)

不应该'吨

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

够了吗?

答案 1 :(得分:2)

您不需要插件,可以直接使用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');
});

答案 2 :(得分:2)

这将是你想做的事情的直接(jQuery-esque)方式:

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');
});

答案 3 :(得分:0)

这个

DECLARE @callc TABLE(UserID nvarchar(100), StartTime datetime, EndTime datetime
        , StatusKey nvarchar(100), StateDuration int);
INSERT INTO @callc(UserID, StartTime, EndTime, StatusKey, StateDuration)
    VALUES('amjackson', '2016-04-25 12:12:14', '2016-04-25 12:12:19', 'followup', 5)
    , ('amjackson', '2016-04-25 12:12:19', '2016-04-25 12:13:23', 'Break', 64)
    , ('amjackson', '2016-04-25 12:13:23', '2016-04-25 12:13:42', 'available', 19)
    , ('amjackson', '2016-04-25 12:13:42', '2016-04-25 12:19:42', 'Break', 360)
    , ('amjackson', '2016-04-25 12:19:42', '2016-04-25 12:21:55', 'available', 133);

SELECT  UserID
        , StartTime AS [date]
        , ISNULL([followup], 0) AS [followup]
        , ISNULL([Break1], 0) AS [Break1]
        , ISNULL([available], 0) AS [available]
        , ISNULL([Break2], 0) AS [Break2]
FROM    (   SELECT  c.UserId
                , CAST(c.StartTime AS date) AS [StartTime]
                , c.StatusKey
                , c.StateDuration
            FROM    @callc c
            WHERE   c.StatusKey != 'Break'
            UNION ALL
            SELECT  b.UserId
                , CAST(b.startTime AS date)
                , b.StatusKey + CAST(ROW_NUMBER() OVER(PARTITION BY UserID ORDER BY b.StartTime ASC) AS nvarchar(50))
                , b.StateDuration
            FROM    @callc b
            WHERE   b.StatusKey = 'Break'
        ) t
PIVOT(SUM(StateDuration) FOR StatusKey IN([followup], [Break1], [available], [Break2]))p;

返回匹配元素的集合。这个

$('.example a')

将红色设置为集合中的所有元素。

这就是jQuery的工作原理。

答案 4 :(得分:0)

我认为不可能同时进行所有计算,你应该使用线程,或webWorker。您可以在mdn中获得有关此内容的更多信息。

答案 5 :(得分:0)

您可以缓存选择器,使用$.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>