【问题标题】:Jquery: get ancestors (or descendants) and selfJquery:获取祖先(或后代)和自我
【发布时间】:2011-01-31 07:07:31
【问题描述】:

可以使用matchedset.find(selector) / matchedset.parents(selector) 来获取由选择器过滤的当前匹配集的后代/祖先,但这不包括匹配集本身(如果它恰好也匹配选择器)。有没有比

更好(更简洁和/或更快)的方法来获得它
matchedset.find(selector).add(matchedset.filter(selector))

和相应的父母()?

【问题讨论】:

    标签: jquery filter ancestor descendant


    【解决方案1】:

    你可以这样做:

    matchedset.find('*').andSelf().filter(selector);
    

    对于父母:

    matchedset.parents('*').andSelf().filter(selector);
    

    【讨论】:

    【解决方案2】:

    我认为您的方法在执行时间方面是有效的,但您可能要求的是语法糖。为此,您可以将其包装到插件中:

      jQuery.fn.findAndSelf = function(selector) {
        return this.find(selector).add(this.filter(selector))
      }
    

    然后像这样使用它:

    $('.whatever').findAndSelf('.awesome')
    

    如果你想变得花哨,你可以创建一个插件,它不仅适用于“查找”,还适用于“父母”和“孩子”以及其他基于选择器的插件:

      jQuery.fn.withSelf = function(plugin, selector) {
        return this[plugin](selector).add(this.filter(selector))
      }
    

    然后您将提供您要调用的遍历插件作为第一个参数:

    $('.whatever').withSelf('find', '.awesome')
    $('.whatever').withSelf('parents', '.awesome')
    

    Just for kicks,另一个有趣的插件,可让您一次调用任意数量的遍历插件:

      jQuery.fn.traverse = function(plugins, selector) {
        var set = new jQuery();
        $.each(plugins, function(i, val) {
          set.add(this[val](selector));
        }
        return set
      }
    

    您可以使用基于选择器的插件的任意组合来调用它,如下所示:

    $('.whatever').traverse(['find','filter'], '.awesome')
    $('.whatever').traverse(['parents','find'], '.awesome')
    $('.whatever').traverse(['parents', 'filter'], '.awesome')
    

    【讨论】:

      【解决方案3】:

      虽然 Jeoff 的解决方案很不错,但有时能够迭代所有元素也很不错,包括没有选择器的自身。这个插件更灵活一点:

      $.fn.all = function(selector) {
          if(selector===window.undefined) return this.find('*').andSelf();
          return this.filter(selector).add(this.find(selector));
      };
      

      【讨论】:

        【解决方案4】:

        查找“andSelf()”函数。

        【讨论】:

        • andSelf() 没有选择器
        【解决方案5】:

        对于父母,您有closest(selector)

        【讨论】:

          猜你喜欢
          • 2015-10-16
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多