【问题标题】:Does jQuery have something like the :any or :matches pseudo-class?jQuery 是否有类似 :any 或 :matches 伪类的东西?
【发布时间】:2014-02-15 20:11:48
【问题描述】:

我想简化我的选择器:

'#a #b a[href^=mailto], .c .d a[href^=mailto]'

收件人:

':matches(#a #b, .c .d) a[href^=mailto]'

这可能只使用 jQuery 选择器吗?还是我必须这样做:

$('#a #b, .c .d').find('a[href^=mailto]')

这不是那么灵活。

【问题讨论】:

  • .find() 有什么问题?
  • 如果 CSS 规范中没有伪类,为什么你认为它们应该在 jQuery 中?为什么不看一下 jQuery 文档? api.jquery.com/category/selectors
  • .find 不允许使用其他选择器(您可以使用children 直接子代或find 的后代)。并且 jQuery 中有一整类选择器不在 css 中:api.jquery.com/category/selectors/jquery-selector-extensions
  • @theazureshadow,很抱歉发表了严厉的评论。我的意思是:如果遇到类似的问题,那么深入研究搜索、CSS 规范和 jQuery 文档——1) 选择器存在于 jQuery 但 CSS (Extensions is good); 2) CSS 中存在选择器,但 jQuery (在错误跟踪器中打开票证的充分理由); 3)两个都不存在selector(可惜,求改进)
  • 似乎答案是它不存在。在等待选择器级别 4 时,我可以很冗长。dev.w3.org/csswg/selectors4/#matches

标签: jquery css jquery-selectors css-selectors


【解决方案1】:

jQuery 不提供与:any()/:matches() 等效的选择器(其中:any() 是原始形式,it was first implemented internally in Gecko and WebKit)。如果您不能或不愿意扩展您的选择器,您确实必须分解您的选择器字符串并进行单独的方法调用。

您使用哪种方法取决于:matches() 将出现在您的选择器中的确切位置:

  • 如果:matches() 单独出现在选择器字符串的开头,在任何组合符之前,如问题中所示:

    ':matches(#a #b, .c .d) a[href^=mailto]'
    

    在出现:matches() 的地方替换$(),并将选择器的其余部分传递给.find().children().next().nextAll(),具体取决于:matches() 后面的组合子(后代、子、 +~)。

    转载自问题:

    $('#a #b, .c .d').find('a[href^=mailto]')
    
  • 如果:matches()单独出现在组合符之后,例如:

    '#a #b > :matches(.c, .d)'
    

    :matches()出现的地方替换上述方法之一:

    $('#a #b').children('.c, .d')
    
  • 如果:matches() 出现在另一个复合选择器中,例如:

    ':matches(#a #b, .c .d) a[href^=mailto]:matches(.e, .f)'
    

    在出现:matches() 的地方替换.filter()

    $('#a #b, .c .d').find('a[href^=mailto]').filter('.e, .f')
    

【讨论】:

    【解决方案2】:

    如果你正在寻找所有a[href^=mailto],那么

    $('a[href^=mailto]')....
    

    $('* a[href^=mailto]')....
    

    或者如果他们有一个“通用”选择器/父级

    $('selector * a[href^=mailto]')....
    

    否则:

    $('#a #b, .c .d').find('a[href^=mailto]') 正如您在问题中所写的那样

    【讨论】:

      【解决方案3】:

      它们有 .has(),它将匹配元素的集合减少为具有与选择器或 DOM 元素匹配的后代的元素。

      所以这将返回 父对象,这些对象的锚点带有以 mailto 开头的 href:

      $('#a #b, .c .d').has('a[href^=mailto]');
      

      但就选择锚点本身而言,您的最后一个选项 find() 是最好的。它本质上就是在任何其他方法的幕后调用。

      $('#a #b, .c .d').find('a[href^=mailto]');
      

      【讨论】:

      • 我认为他是想联系a[href^=mailto],而不是他们的父母。
      • @JeromyFrench - 是的,我读得太快了。我已经更新澄清。
      【解决方案4】:

      目前在 jQuery 中没有你提到的选择器。

      看起来你的最后一个选择器已经是最简化的方式了,如果有什么可以做的不仅仅是缩短:

      $('#b, .c .d').find('a[href^=mailto]')
      

      如果您需要 #b 作为 #a 的后代,则无法缩短您的选择器 IMO

      【讨论】:

      • 如果他只想要#b(如果它是#a 的后代)怎么办?
      • 我是说$('#a #b')(给我一个id为b的#a的后代)与('#b')不同(给我 #b)。
      • “没有选择器”是我想要的。但是您答案的第二部分似乎没有用。如果你删除它,我会接受这个答案。
      猜你喜欢
      • 1970-01-01
      • 2011-09-10
      • 1970-01-01
      • 2010-10-22
      • 2017-12-08
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多