【问题标题】:Getting collection index in pseudo-class? (jquery 1.8+)在伪类中获取集合索引? (jQuery 1.8+)
【发布时间】:2012-11-07 06:35:18
【问题描述】:

我正在尝试实现一个伪类(在 jQuery 1.8.3 中)。代码如下:

(function($) {
    $.extend($.expr[':'], {
        group: $.expr.createPseudo(function(arg) {
            var index = 0;
            return function(element) {
                index += 1;
                var num = parseInt(arg, 10);
                if (isNaN(num)) {
                    return false;
                }
                return (((index-1) % (num*2)) < num);
            }
        })
    });
})(jQuery);

这个选择器的目的是为“n”个连续的元素组应用一种样式,并且可以像这样使用,以另一种颜色(用 'alt 分类)为 tbody(“this”)的每 3 行着色')

$(this).children(':visible').has('td').filter(':group(3)').addClass('alt')

这对一个人来说效果很好。但是,如果我在几个 tbodies 上进行迭代(使用“ $('..').each” 构造),则索引不会在两者之间重置。 这种效果可以在 jquery 1.6 中成功实现,因为我们自然(在底层的“组”函数参数中)有集合内的索引:

(function($) {
    $.extend($.expr[':'], {
        group: function(element, index, matches, set) {
            var num = parseInt(matches[3], 10);
            if (isNaN(num)) {
                return false;
            }
            return index % (num * 2) < num;
        }
    });
})(jQuery);

我们如何在 jquery 1.8 中实现相同的效果?

非常感谢您的见解!

【问题讨论】:

  • 问题是var index = 0; 只执行一次,就在createPseudo 被调用的时候。然后它不断被返回的函数递增,该函数已经关闭了它。
  • 阿萨德,这正是问题所在。每次迭代新集合时如何重置索引?或者有没有办法编写扩展以将索引作为参数传递(如在 jquery 1.6 中)?谢谢。

标签: jquery pseudo-class


【解决方案1】:

Sizzle中有一个叫createPositionalPseudo的函数,但是没有暴露出来。通过复制该功能,我可以实际使用它并且它有效。我将其简化为:

$.extend($.expr[':'], {
  group: $.expr.createPseudo(function(arg){
    return $.expr.createPseudo(function(seed, matches){
      for (var i=0; i<seed.length; i++) 
        if (i % (arg * 2) >= arg)
          matches.push(seed[i]);
      })
  })
});

我创建了一个jsFiddle 用于测试。

我不知道Sizzle的内幕,好像seed是伪过滤器要处理的元素列表,matches是返回列表,表示哪些通过了过滤器。

createPositionalPseudo 也修改了seed,但上面的代码没有。它可能会导致问题,因为我不知道里面是什么,我不确定。但是,它在我的测试中运行良好。

jsFiddle 中的 JavaScript 包含一个 create_group_pseudo_safe,它没有被简化。如果简化版有任何问题,那个安全版功能应该可以工作。

【讨论】:

  • livibetter:我看了你的小提琴,还在我的页面上尝试了你的代码。它以正确的方式着色(带有 th 的 tr 被忽略,着色在同一个表中的每个新子实体处按预期重置)。感谢这个好答案!我认为 jQuery 公开这个 createPositionalPseudo 以轻松拥有我们在 1.6 中使用的位置伪工具会很好。
猜你喜欢
  • 1970-01-01
  • 2015-03-18
  • 1970-01-01
  • 2022-11-23
  • 2019-10-01
  • 1970-01-01
  • 2011-06-16
  • 1970-01-01
  • 2016-10-01
相关资源
最近更新 更多